80,351
社区成员
发帖
与我相关
我的任务
分享Android WebView中图片适配问题
一般使用WebView加载页面，会出现图片超过屏幕大小的问题。
这时能够使用css解决，代码如下：
// 使用css样式的方式设置图片大小
String css = "<style type=\"text/css\"> img {" +
"width:100%;" +
"height:auto;" +
"}" + "</style>";
String html = "<html><header>" + css + "</header><body>" + body + "</body></html>";
但是使用这种方法，在某些机型却会出现图片被过分拉伸的现象，如下图：
上面的现象为红米真机测试，我试过将 width:100%换成max-width:100%，但是这样却会使WebView中的图片缩小的比屏幕还要小很多。
所以，请教一下大家，如何才能使图片适应屏幕宽度而且不会让图片被过度拉伸？
这时能够使用css解决，代码如下：
// 使用css样式的方式设置图片大小
String css = "<style type=\"text/css\"> img {" +
"width:100%;" +
"height:auto;" +
"}" + "</style>";
String html = "<html><header>" + css + "</header><body>" + body + "</body></html>";
但是使用这种方法，在某些机型却会出现图片被过分拉伸的现象，如下图：
上面的现象为红米真机测试，我试过将 width:100%换成max-width:100%，但是这样却会使WebView中的图片缩小的比屏幕还要小很多。
所以，请教一下大家，如何才能使图片适应屏幕宽度而且不会让图片被过度拉伸？
...全文
请发表友善的回复…
发表回复
宝塔山上的猫 2017-02-24
- 打赏
- 举报
关键代码如下：
// 使用css样式的方式设置图片大小
String css = "<style type=\"text/css\"> img {" +
"width:100%;" +
"height:auto;" +
"}" + "</style>";
String html = "<html><header>" + css + "</header><body>" + body + "</body></html>";
mWebView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", "");
····
/**
* 设置WebView相关配置
*/
private void setWebView(){
mWebSettings = mWebView.getSettings();
mWebSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
mWebSettings.setLoadWithOverviewMode(true);
mWebSettings.setUseWideViewPort(true);
mWebSettings.setSupportZoom(true);
mWebSettings.setJavaScriptEnabled(true);
mWebSettings.setDomStorageEnabled(true);
mWebSettings.setDefaultTextEncodingName("utf-8");
mWebSettings.setAllowFileAccess(true);
// 暂时阻塞图片加载，等待网页加载完成，再进行加载图片
mWebSettings.setBlockNetworkImage(true);
mWebSettings.setAppCacheEnabled(true);
mWebView.setWebChromeClient(new MyWebChromeClient());
mWebView.setWebViewClient(new MyWebViewClient());
}
之所以这样加载，是因为能够获取的json数据是html的body部分。
宝塔山上的猫 2017-02-24
- 打赏
- 举报
之所以这样处理是因为前端没写这个，需要自己来实现
ganshenml 2017-02-24
- 打赏
- 举报
关键代码如下：
// 使用css样式的方式设置图片大小
String css = "<style type=\"text/css\"> img {" +
"width:100%;" +
"height:auto;" +
"}" + "</style>";
String html = "<html><header>" + css + "</header><body>" + body + "</body></html>";
mWebView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", "");
····
/**
* 设置WebView相关配置
*/
private void setWebView(){
mWebSettings = mWebView.getSettings();
mWebSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
mWebSettings.setLoadWithOverviewMode(true);
mWebSettings.setUseWideViewPort(true);
mWebSettings.setSupportZoom(true);
mWebSettings.setJavaScriptEnabled(true);
mWebSettings.setDomStorageEnabled(true);
mWebSettings.setDefaultTextEncodingName("utf-8");
mWebSettings.setAllowFileAccess(true);
// 暂时阻塞图片加载，等待网页加载完成，再进行加载图片
mWebSettings.setBlockNetworkImage(true);
mWebSettings.setAppCacheEnabled(true);
mWebView.setWebChromeClient(new MyWebChromeClient());
mWebView.setWebViewClient(new MyWebViewClient());
}
之所以这样加载，是因为能够获取的json数据是html的body部分。[/quote]直接调用url就可以了，js、css这些也都可以通过网页来实现而不用自己处理。而且就这样的话，别人也不好帮你调，一没url，另外一个也没有真机
chinahbbt 2017-02-23
- 打赏
- 举报
Android这里只是显示网页,这里应该是前端来处理吧,
ganshenml 2017-02-23
- 打赏
- 举报
Android代码上上来
