Android適配使用webview加載後圖片顯示過大的問題

最近在開發過程當中，須要用webview控件來展現文章的詳情頁面，流程是經過請求後臺數據，而後用控件加載，然後臺返回的文章詳情頁面是直接網頁端使用的，並無對移動端進行適配，致使webview加載後文章詳情展現的圖片過大，須要左右移動才能查看完整的圖片，這顯然給用戶的體驗不好，這個時候就須要咱們移動端進行作適配了。

先來看看沒有作適配以前的效果：

咱們能夠看到加載後的文章詳情中的圖片只顯示了一部分。

下面來看看解決方案： webview的基本使用流程這裏我就不重複說明了，本篇針對的是文章詳情加載完成後出現的狀況，這裏咱們使用的方法是：經過js腳本，重置img標籤中圖片的寬度和高度。

使用步驟： 一、此方法須要使用js,因此webview設置屬性中必定要添加下面這句，否則無效。

webView.getSettings().setJavaScriptEnabled(true);//支持javascript
複製代碼

二、 給webview從新設置WebViewClient

webView.setWebViewClient(new ArticleWebViewClient());
複製代碼

三、重寫WebViewClient的onPageFinished方法

private class ArticleWebViewClient extends WebViewClient {

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            //重置webview中img標籤的圖片大小
            imgReset();
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

    /**
     * 對圖片進行重置大小，寬度就是手機屏幕寬度，高度根據寬度比便自動縮放
     **/
    private void imgReset() {
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName('img'); " +
                "for(var i=0;i<objs.length;i++) " +
                "{"
                + "var img = objs[i]; " +
                " img.style.maxWidth = '100%'; img.style.height = 'auto'; " +
                "}" +
                "})()");
    }
複製代碼

咱們再來看看圖片自應手機屏幕後的效果圖：

總結： 咱們能夠看到適配後的效果仍是蠻不錯的，流程是加載完頁面後，重置img標籤中圖片的寬度和高度，到這裏就完成了。

---

如下是我的公衆號(longxuanzhigu)，以後發佈的文章會同步到該公衆號，方便交流學習Android知識及分享我的愛好文章，有問題能夠留言哦：