WebView图片自适应屏幕
webview 图片 屏幕 适应
2023-09-14 08:57:57 时间
记得曾经有好多人问过我webview加载到的图片太大了，超过了屏幕的宽度，怎么办呢？在笔者写这篇文章之前，也没有真正去验证过是否可行，只是告诉大家通过JS去设置css样式。
今天，也在segmentFault上看到有人也提了这样一个问题，因此决定亲自去测试一下，并分享给大家！
HTML代码img src="http://www.zg2sc.cn/upfile/pic/2014/05/14/5f80fc3a258940998f921953269d1960141058011295091_163227633232_2.jpg" /img
img src="http://www.jydoc.com/uploads/jydoc/p35501/20091292046379677801.jpg" /img
适应前图片太大
在网上随便找了几张大图，在适应之前，图片是远远大过屏幕的大小的，我们这里通过JS来实现图片自适应大小。在适应屏幕大小之前的效果图如下：
如何通过js实现图片自适应屏幕呢？
适应后图片显示合适图片自适应后的效果图如下：
我们只需要在webview的代理中实现注入js代码来设置图片的css就可以了：
var imgs = document.getElementsByTagName(img); \ for (var i = 0; i imgs.length; ++i) {\ var img = imgs[i]; \ img.style.maxWidth = %f; \ } \ }";
如果我的问题不清楚，可以到https://segmentfault.com/q/1010000002693677看看问题，当然这里只是一种方式来实现，其实还有很多的方式可以实现的，不过都需要依靠JS来实现的。
比如，我们可以通过JS获取所有的图片的URL然后本地去加载图片，将图片裁剪成适应后应该的图片的大小，这样既可以缓存到本地，又可以自适应。
请大家到我的GITHUB下载DEMO：WebViewImgAutoFit
喜欢就star一下!
无论是Android手机还是iOS手机，使用WebView加载一些没有专门为手机屏幕做适配的网页的时候，就会出现网页中的图片等标签元素的宽度大小和手机屏幕的宽度不一致的情况，如下图 之所以会出现上面的情况，是因为网页中的...
最近在为公司的几个H5项目做app打包，然后就踩到这个坑了。 项目中有 h5调用相册选择图片，然后上传这个功能，测试说上传不了图片。然后搜了不少资料，折腾了一下午，终于搞好了，特此记录下。
解决 android 高低版本 webView 里内容 自适应屏幕的终极方法 转载请声明出处(http://www.cnblogs.com/linguanh/) 一，先说下我的情况，大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的，先从数据库里面拿出来html标签，因为加载到移动端的网页内容是用户在网页编辑好了之后提交到服务器的，即网页内容是 b...
hybcoder 运营小帮手新闻推广软文发布推广平台，官网：https://www.yunyingxbs.com