Android WebView图片适配解决方案

2023年7月24日 325次阅读 来源: SherlockShi

WebView的各种坑，今天又让我发现一个。

一、懵逼

最近公司项目中新闻模块需要用WebView来加载，而且服务端返回的是String类型的html代码，包含各种标签，各种转义符，一开始直接用loadDataWithBaseURL()加载的时候，出现各种&lt;、&gt;，直接懵逼了，后面一查，只是因为转义符的关系，那直接用String类的replace()方法替换成对应的<、>，就搞定了。

但是当新闻里面的图片大于屏幕宽度时，会出现横向滚动条，图片也只显示部分，向右滚动屏幕才能看到剩余的图片内容，这样极不方便，也不美观。

网上搜索了一番，有种解决方案是直接把整个WebView的绽放比例变小，适配屏幕，这样出来的图片是适配屏幕了，但是文字就变得非常小，完全就是把PC端网页塞进手机的感觉了。

二、转机

突然看到泡在网上的日子大哥的一篇文章WebView加载图片超过屏幕大小的问题，说的是让PC端在img标签里面配置一下最大宽度就可以解决了：

<style>
 
img{
 max-width:80%;
 height:auto;
}
 
</style>

三、再次懵逼

赶紧联系服务端人员，结果被告知，这是使用某个框架做出来的效果，没办法修改里面的样式，这不又再次懵逼了吗…

四、柳暗花明又一村

程序员都是打不死的蟑螂，只要有一线希望，就要努力去实现自己的价值，不，保住自己的饭碗。

上面泡网大哥的方法，其实就是给img设置样式。那服务端搞不定，就只能我们客户端这边来做了，能不能我们直接给每个img标签都加上最大宽度的限制呢？既然我们能把转义符替换掉，那是不是也能用同样的方法来加样式呢？

五、解决方案

答案是肯定的，在我们获取到的String类型的html代码里面，我们已经把转义符replace成我们实际需要的字符，这时候我们就能取到img的标签了(<img>)，那只要加上如下的代码，就可以了：

htmlData = htmlData.replace("<img", "<img style='max-width:90%;height:auto;'");

原理就是上面分析的，在每个img标签里面，加上最大宽度和高度的控制，最大宽度比例可以根据需要自由设置。经过测试，暂时没发现问题，如果大家有发现问题，或者有其它的解决方案，欢迎随时给我留言。

PS：欢迎关注SherlockShi博客

    原文作者：SherlockShi
    原文地址: https://www.jianshu.com/p/0eb85fc7acc2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞