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一下!

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部