android WebView 图片缩放功能小结

最近遇到一个要支持webview图片自适应屏幕的功能。上网搜索了一大堆资料，花了一天的时间，总算是把问题解决，现在总结一下步骤。

1. mWebView.setWebViewClient(new MyWebViewClient());

2. // webview 4.4
@SuppressLint("JavascriptInterface")
class MyWebViewClient extends WebViewClient {

@Override
@SuppressLint("JavascriptInterface")
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);


mWebView.setWebChromeClient(new WebChromeClient());

mWebView.getSettings().setJavaScriptEnabled(true); // 设置支持javascript脚本
if(android.os.Build.VERSION.SDK_INT >= 19) {
mWebView.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName('img'); "
+ "for(var i=0;i + // //webview图片自适应，android4.4之前都有用，4.4之后google优化后，无法支持，需要自己手动缩放
" objs[i].style.width = '100%';objs[i].style.height = 'auto';"
+ "}"
+ "})()"
);
} else{
view.loadUrl("javascript:var imgs = document.getElementsByTagName('img');for(var i = 0; i= 'auto';}");
}
}

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

}

二.其他做法分析

// Android 4.4图片显示不全
if(android.os.Build.VERSION.SDK_INT >= 19) {// android系统版本号
mWebView.getSettings().setUseWideViewPort(true);
  mWebView.getSettings().setLoadWithOverviewMode(true);

} else{
mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //就是这句
}

1.上面有两种网友推荐的解决方法。

mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);

在4.4上面是可以实现图片缩小，不过连字体也缩小，不适合单独要求缩小图片。

2.mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 这个设置在4.4之后已经被废弃了，而且原理是整个缩小web页面达到适合一屏，也是不符合要求。

三.总结：

1. // webview 4.4
@SuppressLint("JavascriptInterface") 4.4要求添加否则在部分机型上会出现异常。

2.onPageFinished执行，是为了保证url加载完成之后，重新加载一次。

3. if(android.os.Build.VERSION.SDK_INT >= 19) {
   mWebView.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName('img'); "
+ "for(var i=0;i + // //webview图片自适应，android4.4之前都有用，4.4之后google优化后，无法支持，需要自己手动缩放
" objs[i].style.width = '100%';objs[i].style.height = 'auto';"
+ "}"
+ "})()"
);
} else{
   view.loadUrl("javascript:var imgs = document.getElementsByTagName('img');for(var i = 0; i= 'auto';}");
}

区分4.4系统，因为在4.4的系统上面，URL不太一样，需要进行区分。

4.部分4.4系统的手机不支持自定义js方法，所以才采用下面方式。

mWebView.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName('img'); "
+ "for(var i=0;i + // //webview图片自适应，android4.4之前都有用，4.4之后google优化后，无法支持，需要自己手动缩放
" objs[i].style.width = '100%';objs[i].style.height = 'auto';"
+ "}"
+ "})()"
);

5.解决的方式是，通过利用js技术里面的imgs.width = '100%';来解决。

更多相关文章

随机推荐