这几天一直困扰我的一个问题,
WebView加载XML的时候,图片跟文字一直无法做到同时自适应,网上也找了很多方法,效果出来跟安卓的就是有差距;
另外,如果设置了下面这行代码:
_webView.scalesPageToFit = YES;
布局的样式,会优先选择尺寸最大的那一张图片适应屏幕,其他的图片保持原图显示,这样出来的效果如下图


所以,这样看起来会很不协调。其实,要做到图片自适应屏幕,也没有想像当中那么难,把
_webView.scalesPageToFit = YES;这行代码注释掉,执行下面的代码就OK了
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *js = @"function imgAutoFit() { \
var imgs = document.getElementsByTagName('img'); \
for (var i = 0; i < imgs.length; ++i) {\
var img = imgs; \
img.style.maxWidth = %f; \
} \
}";
js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];
[webView stringByEvaluatingJavaScriptFromString:js];
[webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];
}
运了出来的效果是下面这样的,完成解决



喜欢的,点个赞!
|