我们在开发中，显示信息详情时，一般后台会给出html文本，在android端一般采用webview控件来展示，但是后台给出的html文本一般是给电脑端用的，没有自适配手机，导致手机端图片显示过大，需要左右移动来查看全图。下面给出几种实用方法，达到在手机端用webview展示html中的图片，能自适应手机屏幕展示。

需要用webview控件进行展示html文本，为使文字也自适应手机屏幕大小，需要先对android webview控件的属性进行相应设置，这里bindingView.contentWv代表webview控件。

下面介绍三种常用的方法：

方法一：直接替换html文本中img标签下图片大小

如果html中图片没有设置大小，可以采用下面简单方法，设置图片的宽高，但图片可能会变形。

 

方法二：使用Jsoup查找img标签，替换图片的宽度和高度

实现步骤：

1. 导入jsoup包

 

2. 在代码中添加img标签替换函数

 

3. 在webview中加载内容时调用替换函数

bindingView.contentWv.loadDataWithBaseURL(null, getNewContent(content), “text/html”, “utf-8”, null);

注意事项，在进行项目混淆时，需要添加‘-keep class org.jsoup.*’这句，否则会报错*

使用此方法，需要引入第三方库，但使用比较简单。

方法三：使用js脚本，重置img标签中图片的宽度和高度

此方法需要使用js,固webview设置属性中一定要添加下面这句

 

实现步骤：

1. 给webview重新设置WebViewClient

 

2. 重写WebViewClient的onPageFinished方法

如果只需要图片自应手机屏幕大小，现在已经结束了，完成任务了，且在webviewClient中的onPageFinished中也不需要添加addImageClickListner()方法，下面介绍的时点击webview图片查看大图。

3. 点击详情图片查看大图

（1)注入js脚本，设置图片点击函数openImage

 

（2)实现点击事件

 

我们来看下实际效果：
下面图1代表是没有进行适配的图片显示效果，可能看到图片没有显示全，需要左右移动才能查看全图：

下面图2代表是适配后的图片显示效果：

可以看出效果还是挺明显的，适配效果很好。

总结

上面三种方法，都能达到webview中图片自适应用手机屏幕大小，但三种方法，笔者更多的是采用第三种方法来实现。使用虽然复杂一些，但是不用引入第三方库，方便控制。