ios html5图片适配,ios UIWebView加载HTMLStr图文，关于图片宽高设置，webView内容实际高度的踩坑问题...

一.关于UIWebView 与 WKWebView 选取问题

从发布时间看：javascript

2008年7月11日，在新一代iPhone3G正式发售当天，iPhone OS 2.0(iOS 2.0)推出，这时候就有UIWebView了。css

WKWebView是IOS 8.0推出，2014年9月份。新出的WKWebView是对老UIWebView的优化与升级。html

WKWebView对比UIWebView主要优点：java

更多的支持HTML5的特性

增长了加载进度属性：estimatedProgress

耗内存小，网页加载速度也有小幅度提高

功能细分，更具体明确

可是考虑到IOS8.0，UIWebView具备更强的兼容性。加上需求是加载一个HTMLStr+原生控件，要求不高，这里选用UIWebView。web

二.踩坑

坑1：htmlStr没有正确拼接头

NSString *strHTML = _textDic[@"content"];

NSString*str = [NSString stringWithFormat:@" \n"

"

\n"

"

"body {font-size:15px;}\n"

" \n"

" \n"

"

"

"

"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"

"}"

"%@"

""

"",strHTML];

[self.webView loadHTMLString:str baseURL:nil];

头部要这样拼全，若是只拼width为屏幕宽，图片适配会出问题，致使计算UIWebView的内容实际高度会出现偏差，下面有留白。缓存

重点是设置图片宽： " $img[p].style.width = '100%%';\n" 即100%，宽为屏幕宽。cookie

设置图片高："$img[p].style.height ='auto'\n" 即auto，高度自适应，网络

固然，若是固定后台上传图片的宽高，手动计算设置width，height，也能适配。优化

坑2：计算UIWebView实际内容高度不许确

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

webView.scrollView.scrollEnabled=NO;

webView.scrollView.showsVerticalScrollIndicator=NO;

webView.scrollView.showsHorizontalScrollIndicator=NO;//方法1//NSString *htmlHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"];//NSString *htmlWidth = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollWidth"];//float i = [htmlWidth floatValue]/[htmlHeight floatValue];//float height = ScreenWidth/I;//方法2

CGSize fittingSize =[webView sizeThatFits:CGSizeZero];

CGFloat height=fittingSize.height;

_webView.frame= CGRectMake(0, 0, ScreenWidth, height);

}

网上有不少种计算UIWebView的方法，博主尝试过7种之多或大于7，选择比较靠谱的两种方法推荐。lua

方法1:经过计算HTML内容的宽高比结合屏幕宽，算出UIWebView的内容高度。

有个缺点，由于/，若是除不尽，所获得的高度有很小偏差，若是设置UIWebView高度为计算高度，会偏小一丢丢。若是结合刷新上拉加载屡次，巧合下UIWebView底部会出现一条黑线(看似黑线，实际上是偏差形成视觉差)

方法2：自动适应，不改变大小，算出最优宽高，获得的高会比实际高度大，这样不会出现黑线Bug，较好适配。

提一下 sizeToFit 和 sizeThatFits，不少初学者分不清这二者，能够这样理解。

控件sizeToFit后，自适应，会改变控件真实宽高，一般用于求宽。

而sizeThatFits，是算出控件的最优Size，不会改变控件。这个Size你要用来作什么，就是它存在的意义了。

坑3：若是项目须要屡次上拉加载，下拉刷新新的HtmlStr，高度会出错

真凶是UIWebView会自动缓存，屡次加载新HtmlStr，因为缓存，会致使高度为上次计算高度，形成不许确。

解决办法，在从新加载UIWebView时候，清除缓存。

if(_webView) {

_webView=nil;

[self cleanCacheAndCookie];

}/**清除缓存和cookie*/

- (void)cleanCacheAndCookie{//清除cookies

NSHTTPCookie *cookie;NSHTTPCookieStorage *storage =[NSHTTPCookieStorage sharedHTTPCookieStorage];for (cookie in[storage cookies]){[storage deleteCookie:cookie];}//清除UIWebView的缓存

[[NSURLCache sharedURLCache] removeAllCachedResponses];

NSURLCache* cache =[NSURLCache sharedURLCache];

[cache removeAllCachedResponses];

[cache setDiskCapacity:0];

[cache setMemoryCapacity:0];

}

结语：

网上查了不少资料，看了不少人的博客，获益不少。

找出Bug根本缘由，多去尝试，离真相就不远了。借鉴博文：

原文出处：https://www.cnblogs.com/zhouDongdong/p/11202979.html