最近在開發過程中，需要用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標籤中圖片的寬度和高度，到這裏就完成了。
以下是個人公衆號(longxuanzhigu)，之後發佈的文章會同步到該公衆號，方便交流學習Android知識及分享個人愛好文章，有問題可以留言哦：
