需求

1、详情页面包含js Html字符串，需要展示

可能存在的问题

如果包含图片的话，可能会出现图片尺寸不匹配的情况。

原来的样子

匹配之后的效果图

基本解决方法

1、可以通过设置WebView的相关Setting完成页面的适配，但是存在问题是，这种的适配可以达到WebView的宽度适应手机屏幕宽度。

private void initWebView(String str) {WebSettings webSettings = webview.getSettings();webSettings.setJavaScriptEnabled(true);//等比例缩放webSettings.setUseWideViewPort(true);webSettings.setLoadWithOverviewMode(true);webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);webSettings.setSupportZoom(true);//SMALLEST(50%),SMALLER(75%),NORMAL(100%),LARGER(150%),LARGEST(200%);webSettings.setTextSize(WebSettings.TextSize.SMALLER);webview.getSettings().setTextZoom(100);webview.setWebViewClient(new WebViewClient() {@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);Log.d(TAG, "onPageFinished");}});webview.loadData(str, mimeType, encoding);}

出现的效果图是这样的：

以上方法可以设置整体适应手机屏幕，但如果是图片与文字混排，图片大小不一，则会出现问题，文字不能到头就换行了，左右仍然可以滑动，无法适配图片，以下方法可以解决图片的适配主要思路：替换js代码中的图片的大小设置

1、代码动态替换标签

public void getNewHtmlText(String html){//替换更改String str = html.replace("<img", "<img style=\"display: block;max-width:100%;\"");return str;
}

2、代码动态注入JS方法

给WebView设置自己的WebViewClient，重写onPageFinished方法，在页面加载完成之后，运行注入的JS方法

webview.setWebViewClient(new WebViewClient() {@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);Log.d(TAG, "onPageFinished");reloadJS();}});

private void reloadJS(){webview.loadUrl("javascript:(function(){"//将DIV元素中的外边距和内边距设置为零，防止网页左右有空隙+" var divs = document.getElementsByTagName(\"div\");"+" for(var j=0;j < divs.length;j++){"+"  divs[j].style.margin=\"0px\";"+"  divs[j].style.padding=\"0px\";"+"  divs[j].style.width=document.body.clientWidth-10;"+" }"+" var imgs = document.getElementsByTagName(\"img\"); "+"  for(var i=0;i < imgs.length;i++)"+"      {"//过滤掉GIF图片，防止过度放大后，GIF失真+"    var vkeyWords=/.gif$/;"+"        if(!vkeyWords.test(imgs[i].src)){"+"        var hRatio="+(getScreenWidthPX()-DipPxutil.dip2px(this,30))+"/imgs[i].width;"+"        imgs[i].height= imgs[i].height*hRatio;"//通过缩放比例来设置图片的高度+"        imgs[i].width="+(getScreenWidthPX()-DipPxutil.dip2px(this,30))+";"//设置图片的宽度+"        }"+"}"+"})()");}

3、引入jsoup完成属性的替换

jsoup是一个很好的开源项目，可以解析操作JS，引入也非常简单，点击此处直接去下载jar包，也可以使用Gradle集成，添加以下代码到app -----build.gradle：

compile 'org.jsoup:jsoup:1.11.3'

Android studio 3.0以上添加以下引用：

implementation 'org.jsoup:jsoup:1.11.3'

将html文本内容中包含img标签的图片，宽度变为屏幕宽度，高度根据宽度比例自适应

     String newContent = getNewContent(str);webview.loadData(newContent, mimeType, encoding);

public static String getNewContent(String htmltext){try {Document doc= Jsoup.parse(htmltext);Elements elements=doc.getElementsByTag("img");for (Element element : elements) {element.attr("width","100%").attr("height","auto");}return doc.toString();} catch (Exception e) {return htmltext;}}

最终的效果是这样的（完成图片适配）：

示例展示


String htmlText = "<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片插入html 在线演示 www.divcss5.com</title>
</head> <body>
<p>原始大图片</p>
<p>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2116167324,1582233854&fm=11&gp=0.jpg" />
</p>
<p>改小图片</p>
<p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547551786322&di=f60835f88cbb21a117349cabd06ca6c6&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0122e4578f37050000018c1bff84ce.jpg%401280w_1l_2o_100sh.jpg"/>
</p>
<p>答：1、三者的定义不同： 艺人，自古以来，泛指有才艺、有才艺者，也用于身份自称，作为职业，它与文人有一个规范的叫法，即“文化艺术工作者”（文艺工作者）。 演员，指专职演出，或在表演艺术中扮演某个角色的人物。演员也是指参加戏曲、戏剧、电视</p>
<p>改大图片</p>
<p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547551786321&di=949ecb5be73a0a7a37b6da9878177a6b&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F1ad5ad6eddc451da1b8e0aabbdfd5266d0163271.jpg"/>
</p>
<p>答：1、三者的定义不同： 艺人，自古以来，泛指有才艺、有才艺者，也用于身份自称，作为职业，它与文人有一个规范的叫法，即“文化艺术工作者”（文艺工作者）。 演员，指专职演出，或在表演艺术中扮演某个角色的人物。演员也是指参加戏曲、戏剧、电视</p><p>答：1、三者的定义不同： 艺人，自古以来，泛指有才艺、有才艺者，也用于身份自称，作为职业，它与文人有一个规范的叫法，即“文化艺术工作者”（文艺工作者）。 演员，指专职演出，或在表演艺术中扮演某个角色的人物。演员也是指参加戏曲、戏剧、电视</p><p>答：1、三者的定义不同： 艺人，自古以来，泛指有才艺、有才艺者，也用于身份自称，作为职业，它与文人有一个规范的叫法，即“文化艺术工作者”（文艺工作者）。 演员，指专职演出，或在表演艺术中扮演某个角色的人物。演员也是指参加戏曲、戏剧、电视</p><p>答：1、三者的定义不同： 艺人，自古以来，泛指有才艺、有才艺者，也用于身份自称，作为职业，它与文人有一个规范的叫法，即“文化艺术工作者”（文艺工作者）。 演员，指专职演出，或在表演艺术中扮演某个角色的人物。演员也是指参加戏曲、戏剧、电视</p><p>答：1、三者的定义不同： 艺人，自古以来，泛指有才艺、有才艺者，也用于身份自称，作为职业，它与文人有一个规范的叫法，即“文化艺术工作者”（文艺工作者）。 演员，指专职演出，或在表演艺术中扮演某个角色的人物。演员也是指参加戏曲、戏剧、电视</p>
</body>
</html> ";
private String mimeType = "text/html";
private String encoding = "utf-8";public void initWebView(){//webview.loadData(htmlText, mimeType, encoding);String newContent = getNewContent(htmlText);webview.loadData(newContent, mimeType, encoding);
}

WebView手机屏幕（图片适应屏幕的宽度）适配的多种方式相关推荐

手机怎么弄gif图片，手机gif图片怎么制作
现在很多手机都支持拍gif图片了,但是很多人不知道如何将这些gif图片是如何制作的. 首先,你需要在手机上打开一个gif制作软件.目前市面上比较流行的有SOOGIF动图软件. 其次,打开软件,根据软件 ...
html5适应手机比例,HTML5 如何让手机网站自适应设备屏幕宽度
手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下. 方法:在网页头部加上 ...
模仿豌豆荚以及某些刷机软件获取手机屏幕图片
昨天花了一下午研究了下系统截屏,可行的方案有俩: 1.手机端:读取/dev/graphics/fb0文件,该文件存储了当前屏幕画面的数据,将此数据转换成图片存储在手机端即可.但美中不足的是需要获取系统 ...
前端模拟手机屏幕图片渐隐渐现效果实现
在网站上,我们经常会看到这样的效果,有一个IphoneX的手机屏幕,然后屏幕上会像真的一样,会出现各种动画效果,譬如图片的渐隐渐现.今天我们就尝试做一个这样的效果. HTML页面结构大概是这样子的: ...
Android控制图片在屏幕内缩放和移动
通常我们遇到的图片缩放需求,都是图片基于屏幕自适应后,进行缩放和移动,且图片最小只能是自适应的大小.最近遇到一个需求,要求图片只能在屏幕内缩放和移动,不能超出屏幕. 一.需求在屏幕中加载一张图片,图 ...
【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机/平板电脑设备屏幕适配 )
文章目录一.屏幕适配限定符二.手机/平板电脑设备屏幕适配平板电脑市场占有率密度无关像素计算手机设备限定符平板设备限定符参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声 ...
html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
vue图片超出屏幕尺寸自动适应图片比例缩放
vue图片超出屏幕尺寸自动适应图片比例缩放 <div><el-button class="blue-btn"@click="open"> ...
css背景图不失真_html css 中非常经典的背景图片充满屏幕且不变形问题
要求: 图片尺寸任意,图片宽高比任意(意思就是随便拿张图片都得ok),渲染后不可变形图片中心与可视区中心重合图片充满整个屏幕自适应屏幕宽高变化给图片上一层蒙版,便于在其上渲染文字思路分析: ...

WebView手机屏幕（图片适应屏幕的宽度）适配的多种方式

需求