WebView图片自适应屏幕-阿里云开发者社区

开发者社区> 开发与运维> 正文

WebView图片自适应屏幕

简介:

前言

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

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

HTML代码

适应前图片太大

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

image

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

适应后图片显示合适

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

image

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

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

最后

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

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

源代码

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

喜欢就star一下!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章