2019独角兽企业重金招聘Python工程师标准>>>
webview在手机上显示的内容经常非常宽,显示出来之后要手动缩放才能正常浏览。但如果用
[self.webView setScalesPageToFit:YES];
则会被居中缩放的非常小,如图: 
(请无视我demo里的title。。。)
其实html本身有一个缩放的方法,可以在<head>里加一个节点:
<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes\">
content里规定了这个界面: 最小缩放比例是0.1:minimum-scale=0.1
最大缩放比例是2.0:maximum-scale=2.0
允许用户缩放:user-scalable=yes
当前缩放比是1.0:initial-scale=1.0
因此我们可以通过计算initial-scale来决定页面显示的时候缩放到什么比例是正好充满屏幕宽。
可以通过js获取body的实际宽度:
document.body.scrollWidth
然后根据我们自己webview的宽度,就可以得到期待的initial-scale了:webViewwebView.frame.size.width/pageWidth; 下边来说具体怎么在iOS项目中实现:
第一步:js必须是在html加载完成后才能调用,因此在iOS项目中,需要先载入一次原始的html:
//html是否加载完成isLoadingFinished = NO;//这里一定要设置为NO[self.webView setScalesPageToFit:NO];[self.webView loadHTMLString:currentMail.htmlBody baseURL:nil];//第一次加载先隐藏webview[self.webView setHidden:YES];self.webView.delegate = self;
第二步:第一次载入偷偷载入完成后,在代理里边调用js获取宽度,然后算出合适的缩放比例,并在<head>里加上我们需要的<meta>,然后再将新的html重新加载,加载完成后再显示: #pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView
{//若已经加载完成,则显示webView并returnif(isLoadingFinished){[self.webView setHidden:NO];return;}//js获取body宽度NSString *bodyWidth= [webView stringByEvaluatingJavaScriptFromString: @"document.body.scrollWidth "];int widthOfBody = [bodyWidth intValue];//获取实际要显示的htmlNSString *html = [self htmlAdjustWithPageWidth:widthOfBodyhtml:currentMail.htmlBodywebView:webView];//设置为已经加载完成isLoadingFinished = YES;//加载实际要现实的html[self.webView loadHTMLString:html baseURL:nil];
}//获取宽度已经适配于webView的html。这里的原始html也可以通过js从webView里获取
- (NSString *)htmlAdjustWithPageWidth:(CGFloat )pageWidthhtml:(NSString *)htmlwebView:(UIWebView *)webView
{NSMutableString *str = [NSMutableString stringWithString:html];//计算要缩放的比例CGFloat initialScale = webView.frame.size.width/pageWidth;//将</head>替换为meta+headNSString *stringForReplace = [NSString stringWithFormat:@"<meta name=\"viewport\" content=\" initial-scale=%f, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes\"></head>",initialScale];NSRange range = NSMakeRange(0, str.length);//替换[str replaceOccurrencesOfString:@"</head>" withString:stringForReplace options:NSLiteralSearch range:range];return str;
}
效果如下: 