html 显图片宽度100,WebView显示图片适配屏幕宽度

首先必须吐槽一下后台返回的Url网页HTML代码太坑:

情景一、WebView加载url

图片直接就是标签出来的,还是一张巨大的图片,直接导致webview加载只有截取了屏幕大小的宽度,看不到整张图片,测试要求适配屏幕宽度。于是有了这篇博客记录一下,在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

"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代码

这里还记载一种以前遇到的情况,就是接口返回一段HTML方法,需要我们把这段HTML方法放在WebView中显示出来,也会有图片需要适配屏幕宽度的需求,这里的解决方法就简单多了,毕竟我们可以拿到HTML代码处理。

String content = ".....<........>...........";//后台接口返回的需要在WebView中显示的HTML代码

content = content.replace("

webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);