Android適配利用webview加載后圖片顯示過大的解決方法

這篇文章將為大家詳細講解有關Android適配利用webview加載后圖片顯示過大的解決方法，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

前言

最近在開發過程中，需要用webview控件來展示文章的詳情頁面，流程是通過請求后臺數據，然后用控件加載，而后臺返回的文章詳情頁面是直接網頁端使用的，并沒有對移動端進行適配，導致webview加載后文章詳情展示的圖片過大，需要左右移動才能查看完整的圖片，這顯然給用戶的體驗很差，這個時候就需要我們移動端進行做適配了。

先來看看沒有做適配之前的效果：

我們可以看到加載后的文章詳情中的圖片只顯示了一部分。

下面來看看解決方案：

webview的基本使用流程這里我就不重復說明了，本篇針對的是文章詳情加載完成后出現的情況，這里我們使用的方法是：通過js腳本，重置img標簽中圖片的寬度和高度。

使用步驟：

1、此方法需要使用js,所以webview設置屬性中一定要添加下面這句，不然無效。

webView.getSettings().setJavaScriptEnabled(true);//支持javascript

2、 給webview重新設置WebViewClient

webView.setWebViewClient(new ArticleWebViewClient());

3、重寫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標簽中圖片的寬度和高度，到這里就完成了。

關于Android適配利用webview加載后圖片顯示過大的解決方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。