ioswebview混编_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这一块儿的了解不是很多，这部分代码是从别处搜集的，还是比较实用的，记录一下。

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