UIWebView自适应宽度

最新推荐文章于 2020-12-22 11:19:01 发布

Dawe1

最新推荐文章于 2020-12-22 11:19:01 发布

阅读量604

点赞数 1

分类专栏： IOS 文章标签： UIWebView UIWebView自适应宽度加载uiwebview UIWebView的属性设置 UIWebView关闭滑动条

本文链接：https://blog.csdn.net/Dawe1/article/details/50184159

版权

IOS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在手机上显示的内容经常非常宽，显示出来之后要手动缩放才能正常浏览。但如果用 [self.webView setScalesPageToFit:YES]; 则会被居中缩放的非常小，所以我们要再html代码里加个节点

content里规定了这个界面:

最小缩放比例是0.1：minimum-scale=0.1

最大缩放比例是2.0：maximum-scale=2.0

允许用户缩放：user-scalable=yes

当前缩放比是1.0：initial-scale=1.0

因此我们可以通过计算initial-scale来决定页面显示的时候缩放到什么比例是正好充满屏幕宽。

下面来说具体在IOS项目中是怎样实现的

第一步：js必须是在html加载完成后才能调用，因此在iOS项目中，需要先载入一次原始的html：

//html是否加载完成 自己设定一个BOOL值 
isLoadingFinished = NO;  
  
//这里一定要设置为NO  
[self.webView setScalesPageToFit:NO]; //设置webview是否自动设置宽度<p class="p1"><span class="s1"> webview.</span><span class="s2">scrollView</span><span class="s1">.</span><span class="s2">bounces</span><span class="s1">=</span><span class="s3">NO</span><span class="s1">;//设置webview不能滑动</span></p>
 //<span style="font-family: Arial, Helvetica, sans-serif;">htmlName 加载webview的html值</span>

[self.webView loadHTMLString:htmlName baseURL:nil];  
  
//第一次加载先隐藏webview  
[self.webView setHidden:YES];  
  
self.webView.delegate = self;

第二步：第一次载入偷偷载入完成后，在代理里边调用js获取宽度，然后算出合适的缩放比例，并在<head>里加上我们需要的<meta>，然后再将新的html重新加载，加载完成后再显示：

#pragma mark - UIWebViewDelegate  
- (void)webViewDidFinishLoad:(UIWebView *)webView  
{  
    //若已经加载完成，则显示webView并return  
    if(isLoadingFinished)  
    {  
        [self.webView setHidden:NO];  
        return;  
    }  
      
    //js获取body宽度  我们第一次取到webview只是没有显示，而是把webview中真的的html宽度获取到
    NSString *bodyWidth= [webView stringByEvaluatingJavaScriptFromString: @"document.body.scrollWidth "];  
      
    int widthOfBody = [bodyWidth intValue];  
      
    //获取实际要显示的html  
    NSString *html = [self htmlAdjustWithPageWidth:widthOfBody  
                                              html:currentMail.htmlBody  
                                           webView:webView];  
      
    //设置为已经加载完成  
    isLoadingFinished = YES;  
    //加载实际要现实的html  
    [self.webView loadHTMLString:html baseURL:nil];  
}

//获取宽度已经适配于webView的html。这里的原始html也可以通过js从webView里获取

- (NSString *)htmlAdjustWithPageWidth:(CGFloat )pageWidth

html:(NSString *)html

webView:(UIWebView *)webView

{

NSMutableString *str = [NSMutableString stringWithString:html];

//计算要缩放的比例

CGFloat initialScale = webView.frame.size.width/pageWidth;

//将</head>替换为meta+head

NSString *stringForReplace = [NSString stringWithFormat:@"<meta name=\"viewport\" content=\" initial-scale=%f, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes\"></head>",initialScale];

//替换

str =[NSMutableString stringWithFormat:@"</head>%@%@",stringForReplace,str];

return str;

}

第三步，运行代码，跑起来，good luck！

更详细地址链接 ——>

UIWebView自适应宽度

Dawe1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
UIWebView自适应宽度

webview在手机上显示的内容经常非常宽，显示出来之后要手动缩放才能正常浏览。但如果用 [self.webView setScalesPageToFit:YES]; 则会被居中缩放的非常小，所以我们要再html代码中加个节点Html代码： content里规定了这个界面: 最小缩放比例是0.1：minimum-scale=0.1 最大缩放比例是2.0：ma
复制链接

扫一扫