Android与Html5交互第二篇章

webview设置自适应任意大小的pc网页

看到此篇的朋友们，如果试过了第一篇的方法无法解决你的问题，那么下面我们从HTML代码层来解决这类问题。

下面以我代码中遇到的问题举例：

首先，我们在嵌入这类界面是在购物车的详情页中，这样的数据一般都是从后台那边获取的html文本，在Android端一般采用webview来承载，但是这类数据中给出的图片或者表格什么的，都是给PC电脑用的，所以没有自适配手机，导致手机端图片显示过大，需要左右移动或缩放来查看全图。下面我们从html代码层来修改这类问题。

下面介绍几种方法：

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

String phone_url= "<style>//图片大小自适应img{width:100%;height:auto;} //表格大小自适应table{width:100%;} //子表格中class="desc_table"的表格宽度修改table.desc_table{width:100%;} table.desc_table td{width:50%;}</style>"//数据源中返回的html代码+gdb.getProduct().getPhoneContent();

换个简单的表达方式就是修改img和table的width:100%;height:auto; 修改后再加入下面代码，让webview获取这些内容来实现效果即可。

webview.setWebChromeClient(new WebChromeClient());webview.loadDataWithBaseURL(null, phone_url, "text/html", "UTF-8", null);

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

实现步骤：

1. 导入jsoup包

compile 'org.jsoup:jsoup:1.10.2'

2. 在代码中添加img标签替换函数（表格table类似）

/*** 将html文本内容中包含img标签的图片，宽度变为屏幕宽度，高度根据宽度比例自适应**/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;        }    }

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

//数据源：gdb.getProduct().getPhoneContent()webview.loadDataWithBaseURL(null, getNewContent(gdb.getProduct().getPhoneContent()), "text/html", "UTF-8", null);

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

上面2种方法，亲测有效，主要还是看个人处理思路的方向，加段CSS代码就可以完美解决问题。

但是本人的项目中在适配华为荣耀的机型时还是会有部分问题，那是因为从数据库读取到的数据就不是一个标准的html代码，所以你就算写的再完美也终将无法完成适配任务。