在手机上显示的内容经常非常宽,显示出来之后要手动缩放才能正常浏览。但如果用 [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;
}
UIWebView自适应宽度