iOS-UIWebView加载HTMLString图片显示超过屏幕宽度，导致webView可以左右滑动处的理方法

用户1890628

发布于 2018-05-10 14:37:28

1.8K0

发布于 2018-05-10 14:37:28

文章被收录于专栏：Objective-C

简单介绍一下使用[self.webView loadHTMLString:htmls baseURL:nil]单纯加载HTMLString的小技巧。

主要解决的是当加载的HTMLString既有文字又有图片时，图片没有缩放，导致图片宽度超过屏幕宽度，使得webView整体左右都可以滑动，这样效果非常不好（见下图）：

01-图片过宽导致webView可以左右滑动.gif

01-图片过宽导致webView可以左右滑动.gif

效果不好的代码如下：

注：以下方法是在网络请求成功回调里面调用的 // 网络请求加载的数据,进行字典转模型 NSDictionary *dict = [result objectForKey:@"data"]; HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict]; // model.details就是后台返回的HTMLString NSString *htmlString = [NSString stringWithString:model.details]; // webView直接加载HTMLString [self.webView loadHTMLString:htmls baseURL:nil];

经过调整以后（见下图）：

02-经过调整以后的效果.gif

调整后的代码如下：

注：以下方法是在网络请求成功回调里面调用的 // 网络请求加载的数据,进行字典转模型 NSDictionary *dict = [result objectForKey:@"data"]; HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict]; /**
- model.details就是后台返回的HTMLString
- " $img[p].style.width = '100%%';\n"--->就是设置图片的宽度的
- 100%代表正好为屏幕的宽度 */ NSString *htmlString = [NSString stringWithFormat:@"<html> \n" "<head> \n" "<style type="text/css"> \n" "body {font-size:15px;}\n" "</style> \n" "</head> \n" "<body>" "<script type='text/javascript'>" "window.onload = function(){\n" "var $img = document.getElementsByTagName('img');\n" "for(var p in $img){\n" " $img[p].style.width = '100%%';\n" "$img[p].style.height ='auto'\n" "}\n" "}" "</script>%@" "</body>" "</html>",model.details];
// webView直接加载HTMLString [self.webView loadHTMLString:htmlString baseURL:nil];