iOS WebView内容的适配

在开发过程中很多时候为了节约时间成本嵌套一些H5页面，页面的内容有的在H5代码里做过适配有的没做过，这就造成了有些页面在移动设备上走形。下面说一下工程中遇到的一个问题：页面文字适应而图片没有适应，页面显示为文字在屏幕宽度之内而图片保留了网页端的大小，使webView横向容量非常大。。。

解决方式是调用JS语言，调整一下其中图片的高度，这个时机可以选择在webView的代理方法里，代码如下

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    NSString *js = @"function imgAutoFit() { \

    var imgs = document.getElementsByTagName('img'); \

    for (var i = 0; i < imgs.length; ++i) {\

    var img = imgs[i];  \

    img.style.maxWidth = %f;  \

    } \

    }";

    js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];

    [_webView stringByEvaluatingJavaScriptFromString:js];

    [_webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];

}

这段代码表示遍历H5页面中所有的图片并按比例缩放。

完成这步之后会发现图片已经适配OK了，但是底部会空出很大一部分空白，这是因为webview加载完之后容量固定了，但是适配之后实际内容高度变小了，留出了一片空白。这个时候需要再次调用JS调整页面高度，代码如下：

    NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"];

    float clientheight = [clientheight_str floatValue];

    //设置到WebView上

    _webView.frame = CGRectMake(0, 0, self.frame.size.width, clientheight);

    //获取WebView最佳尺寸（点）

    CGSize frame = [webView sizeThatFits:_webView.frame.size];

    //获取内容实际高度（像素）

    NSString * height_str= [_webView stringByEvaluatingJavaScriptFromString: @"document.getElementById('webview_content_wrapper').offsetHeight + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-top'))  + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-bottom'))"];

    float height = [height_str floatValue];

    //内容实际高度（像素）* 点和像素的比

    height = height * frame.height / clientheight;

最后得到的height就是压缩图片后的实际高度。关于JS这一块儿的了解不是很多，这部分代码是从别处搜集的，还是比较实用的，记录一下。

---

如果这篇文章对您有帮助, 请把下面的爱心点一下