Android的WebView可以自动调整大图的大小吗？
Posted
技术标签:
【中文标题】Android的WebView可以自动调整大图的大小吗？【英文标题】：Can Android's WebView automatically resize huge images? 【发布时间】：2011-03-07 04:11:02 【问题描述】：在某些网络浏览器中，巨大的图像会自动调整大小以适应屏幕。
是否可以在 android WebView 中做同样的事情？
网页只包含图像，也许添加一些 javascript 可以解决问题？ 有人已经这样做了吗？
注意：我事先不知道图片的大小。
【问题讨论】：
【参考方案1】：是的，这是可能的。您可以尝试使用下面的代码设置 WebView 布局。它将所有图像（大于Device Screen Width）的大小调整为屏幕宽度。这适用于两个方向（纵向和横向）
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
您可以稍后添加额外的边距/填充以获得正确的间距。
【讨论】：
+1 我还没试过，但听起来很完美，比使用 JavaScript 更好。 工作，在 2.2.1、3.2 和 4.0.3 上测试。minSdkVersion="8"targetSdkVersion="15" 和 android-support-v4.jar。非常简单有效！
我喜欢这个解决方案，但我发现 SINGLE COLUMN 已被弃用。如果有人知道原因，请指出。
@m039 - SINGLE_COLUMN 已弃用，但这是不使用 CSS 的唯一方法。就 YouTube 视频而言，它们在我的设备上运行良好。 （在 Nexus 7 (4.1) 和 Galaxy Nexus (4.0, 4.1, 4.2) 上测试）
所以.. Android 4.4 杀死了 LayoutAlgorithm.SINGLE_COLUMN。有人找到替代品吗？【参考方案2】：
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
有效但为deprecated。这是另一个没有 LayoutAlgorithm.SINGLE_COLUMN 的解决方案，使用 CSS：
@SuppressLint("NewApi")
private openWebView()
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);
else
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
String data = "<div> your html content </div>";
webView.loadDataWithBaseURL("file:///android_asset/", getHtmlData(data), "text/html", "utf-8", null);
private String getHtmlData(String bodyHTML)
String head = "<head><style>imgmax-width: 100%; width:auto; height: auto;</style></head>";
return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
【讨论】：
+1 确实LayoutAlgorithm.SINGLE_COLUMN 似乎已被弃用，因此 Sheharyar 的解决方案变得不那么有吸引力了......
很好的解决方案！谢谢！
带有自动宽度/高度的额外 CSS 行在 5.0 Lollipop 上具有魔力
最佳解决方案.. 效果很好，谢谢.. :) 但我也卡在 youtube 链接中.. 这段代码最适合图像和文本，但它不能改变 youtube 链接的宽度.. 你能帮帮我。
这行得通。我添加了webview_image.settings.builtInZoomControls = true 以允许用户也可以放大和缩小。【参考方案3】：
你可以用这个：
WebView webView = (WebView) findViewById(R.id.myWebView);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
在这里找到了这个解决方案： How to set the initial zoom/width for a webview
【讨论】：
现在可以使用，因为早期的选项已被弃用并且不再起作用【参考方案4】：您可以让浏览器为您调整图像大小以适应屏幕的最大宽度：
<img src="huge-image.jpg" />
也可以根据 WebView 的视口调整其高度：
<img src="huge-image.jpg" />
但是，同时调整宽度和高度的大小会导致图像被拉伸。要根据最适合的一侧调整宽度或高度，您可以考虑使用一些 JavaScript，如下所示：
<img src="huge-image.jpg" onload="resize(this);" />
<script type="text/javascript">
function resize(image)
var differenceHeight = document.body.clientHeight - image.clientHeight;
var differenceWidth = document.body.clientWidth - image.clientWidth;
if (differenceHeight < 0) differenceHeight = differenceHeight * -1;
if (differenceWidth < 0) differenceWidth = differenceWidth * -1;
if (differenceHeight > differenceWidth)
image.style['height'] = document.body.clientHeight + 'px';
else
image.style['width'] = document.body.clientWidth + 'px';
// Optional: remove margins or compensate for offset.
image.style['margin'] = 0;
document.body.style['margin'] = 0;
</script>
【讨论】：
这很好用，但它会放大缩放。知道任何解决方法吗？ 如果你resize only the width，高度会按比例调整。【参考方案5】：我遇到了同样的问题并使用Jsoup 来帮助我并添加所需的受人尊敬的 CSS。您可以轻松add attributes 或 CSS。我的情况是，我从许多来源下载各种不同的 HTML 文件，保存它们，然后在 Webview 中显示它们。这是我在使用 Kotlin 将 HTML 保存到数据库之前解析 HTML 的方法：
// Parse your HTML file or String with Jsoup
val doc = Jsoup.parse("<html>MY HTML STRING</html>")
// doc.select selects all tags in the the HTML document
doc.select("img").attr("width", "100%") // find all images and set with to 100%
doc.select("figure").attr("style", "width: 80%") // find all figures and set with to 80%
doc.select("iframe").attr("style", "width: 100%") // find all iframes and set with to 100%
// add more attributes or CSS to other HTML tags
val updatedHTMLString = doc.html()
// save to database or load it in your WebView
Add Jsoup to your project
玩得开心！
【讨论】：
【参考方案6】：如果您的WebView 宽度为fill_parent，那么您可以使用此代码：
Display display=getWindowManager().getDefaultDisplay();
int width=display.getWidth();
String data="<img src='http://example.com/image.jpg' style='width:"+width+"px' />";
webView.loadData(data, "text/html", "utf-8");
缩放仍然有效！
如果height 是fill_parent，则方法相同。
【讨论】：
@NicolasRaoul 我在 Android 4.0.3 上测试过 - 比例相同 有意思，我一定要试试！【参考方案7】：我最喜欢的：
String data = "<html><body ><img id=\"resizeImage\" src=\""+PictureURL+"\" width=\"100%\" alt=\"\" align=\"middle\" /></body></html>";
webview.loadData(data, "text/html; charset=UTF-8", null);
【讨论】：
【参考方案8】：您可以在请求参数中发送您想要的尺寸，并让服务器为您设置 img 元素中的宽度/高度。
【讨论】：
问题是我事先不知道图片的大小。以上是关于Android的WebView可以自动调整大图的大小吗？的主要内容，如果未能解决你的问题，请参考以下文章