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

2017-01-14 10:05:34来源:http://www.jianshu.com/p/24052ed320e5作者:亦庄_吴彦祖人点击


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


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



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];


03-关键代码描述.png



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台