iOS中UIWebview中网页宽度自适应的问题

550 0 0

作者:jgCho

有的网页中会使用"<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">"这个标签来设置网页的宽度，不过带来的问题是，如果展示这个webview的宽度不等于设备的宽度的时候，就会出现网页内容过宽左右可以滑动或者网页左右内容没有占满。找了一下，有两个解决方法：

1. 利用webview中的scrollview的zoom特性，这个方法会让网页内容变小

- (void)webViewDidFinishLoad:(UIWebView *)theWebView
{
  CGSize contentSize = theWebView.scrollView.contentSize;
  CGSize viewSize = self.view.bounds.size;

  float rw = viewSize.width / contentSize.width;

  theWebView.scrollView.minimumZoomScale = rw;
  theWebView.scrollView.maximumZoomScale = rw;
  theWebView.scrollView.zoomScale = rw;  
}

2. 第二个方法，在客户端使用js重写meta标签，这个也是在webview的delegate的webViewDidFinished回调中调用；我们使用的这种方法来操作，内容不会变小

javascript = [NSString stringWithFormat:@"var viewPortTag=document.createElement('meta');  
              viewPortTag.id='viewport';  
              viewPortTag.name = 'viewport';  
              viewPortTag.content = 'width=%d; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;';  
              document.getElementsByTagName('head')[0].appendChild(viewPortTag);" , (int)authWebView.bounds.size.width];

[authWebView stringByEvaluatingJavaScriptFromString:javascript];