Android WebView设置图片自适应屏幕宽度

在开发中，有时候我们需要加载html中的数据，当html中的各个元素宽高都已经设置好了的情况下，我们可以直接用WebView加载，但是也有时候html各个标签的宽高是不正常的，特别是图片。以下介绍WebView设置加载的网络图片自适应宽高的3种方法，以作记录：

• 方法一、WebView加载url

该方法使用js来设置，在Webview的setWebViewClient()方法中WebViewClient在加载完网页后执行一个JavaScript方法，这个JavaScript方法将所有网页中图片的宽度设置为屏幕显示宽度。

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                String javascript = "javascript:function ResizeImages() {" +
                        "var myimg,oldwidth;" +
                        "var maxwidth = document.body.clientWidth;" +
                        "for(i=0;i <document.images.length;i++){" +
                        "myimg = document.images[i];" +
                        "if(myimg.width > maxwidth){" +
                        "oldwidth = myimg.width;" +
                        "myimg.width = maxwidth;" +
                        "}" +
                        "}" +
                        "}";
                String width = String.valueOf(ScreenUtils.widthPixels(mContext));
                view.loadUrl(javascript);
                view.loadUrl("javascript:ResizeImages();");
            }

• 方法二、WebView直接加载HTML字符串(使用java.lang.String类中的replace()方法)

这种情况我们有时候也会碰到，HTML字符串直接保存在数据库中，后台直接将其返回给我们，我们需要将其加载到WebView中，该情况下我们可以直接使用java.lang.String中的replace方法来替换HTML中的对应字符串就行，如下所示：
//后台返回给我们的html字符串

String content = ".....<........>......</......>.....";

设置宽高自适应方法

content = content.replace("<img", "<img style="max-width:100%;height:auto");
webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);

• 方法三、WebView直接加载HTML字符串(使用Jsoup)

Jsoup解析html字符串是非常方便的，他的中文版官网为Jsoup中文版，其使用方法这里面介绍的非常详细，就不多说了，我就直接吧代码粘贴出来

    /**
     * 设置img标签下的width为手机屏幕宽度，height自适应
     *
     * @param data html字符串
     * @return 更新宽高属性后的html字符串
     */
    private String getNewData(String data) {
        Document document = Jsoup.parse(data);

        Elements pElements = document.select("p:has(img)");
        for (Element pElement : pElements) {
            pElement.attr("style", "text-align:center");
            pElement.attr("max-width", String.valueOf(ScreenUtils.getScreenWidth(getContext()) + "px"))
                    .attr("height", "auto");
        }
        Elements imgElements = document.select("img");
        for (Element imgElement : imgElements) {
            //重新设置宽高
            imgElement.attr("max-width", "100%")
                    .attr("height", "auto");
            imgElement.attr("style", "max-width:100%;height:auto");
        }
        Log.i("newData:", document.toString());
        return document.toString();
    }