ios UIWebview中网页宽度自适应手机

来源：互联网发布：图像特征匹配算法编辑：程序博客网时间：2024/05/21 06:59

有的网页中会使用"<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];

注：第二个方法我测试过不好用，大家用的时候还是测试一下吧

0 0