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代码，所以你就算写的再完美也终将无法完成适配任务。