在开发过程中很多时候为了节约时间成本嵌套一些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这一块儿的了解不是很多，这部分代码是从别处搜集的，还是比较实用的，记录一下。
如果这篇文章对您有帮助, 请把下面的爱心点一下
