转载

WebView图片自适应屏幕

前言

记得曾经有好多人问过我webview加载到的图片太大了，超过了屏幕的宽度，怎么办呢？在笔者写这篇文章之前，也没有真正去验证过是否可行，只是告诉大家通过JS去设置css样式。

今天，也在segmentFault上看到有人也提了这样一个问题，因此决定亲自去测试一下，并分享给大家！

HTML代码

  <html>   <head></head>   <body>     <h1>Test Img howtoautofitwebview</h1>     <imgsrc="http://pic.nipic.com/2007-12-15/2007121519169400_2.jpg"></img>     <h2>Another image</h2>     <imgsrc="http://www.zg2sc.cn/upfile/pic/2014/05/14/5f80fc3a258940998f921953269d1960141058011295091_163227633232_2.jpg"></img>     <h2>Third image</h2>     <imgsrc="http://www.jydoc.com/uploads/jydoc/p35501/20091292046379677801.jpg"></img>   </body> </html>

适应前图片太大

在网上随便找了几张大图，在适应之前，图片是远远大过屏幕的大小的，我们这里通过JS来实现图片自适应大小。在适应屏幕大小之前的效果图如下：

WebView图片自适应屏幕

如何通过js实现图片自适应屏幕呢？

适应后图片显示合适

图片自适应后的效果图如下：

WebView图片自适应屏幕

我们只需要在webview的代理中实现注入js代码来设置图片的css就可以了：

  - (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 = [NSStringstringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];      [webViewstringByEvaluatingJavaScriptFromString:js];   [webViewstringByEvaluatingJavaScriptFromString:@"imgAutoFit()"]; }

当然，我们这里获取了屏幕的宽度，然后设置成图片的最大宽度为屏幕的宽度-20。

最后

如果我的问题不清楚，可以到 https://segmentfault.com/q/1010000002693677 看看问题，当然这里只是一种方式来实现，其实还有很多的方式可以实现的，不过都需要依靠JS来实现的。

比如，我们可以通过JS获取所有的图片的URL然后本地去加载图片，将图片裁剪成适应后应该的图片的大小，这样既可以缓存到本地，又可以自适应。

源代码

请大家到我的GITHUB下载DEMO： WebViewImgAutoFit

喜欢就 star 一下!

关注我

关注	账号	备注
标哥博客iOS交流群一	324400294（满）	群一若已满，请申请群二
标哥博客iOS交流群二	494669518（满）	群二若已满，请申请群三
标哥博客iOS交流群三	461252383（满）	群三若已满，请申请群四
标哥博客iOS交流群四	250351140	群四若已满，会有提示信息
关注微信公众号	iOSDevShares	关注微信公众号，会定期地推送好文章
关注新浪微博账号	标哥的技术博客	关注微博，每次发布文章都会分享到新浪微博
关注标哥的GitHub	CoderJackyHuang	这里有很多的Demo和开源组件
关于我	进一步了解标哥	如果觉得文章对您很有帮助，可捐助我！