Android Webview - 如果太大，则调整图像大小

Question

我正在用 Java 编写一个 Android 应用程序，它基本上用作私人论坛的论坛阅读器。该应用程序显示一个线程列表，一旦用户选择了一个线程，就会打开一个新的 Activity，它基本上由一个 WebView 组成。该应用程序下载并解析论坛主题的源代码 (html)，然后返回仅包含所需信息的“帖子”项目列表（例如作者、html 内容等）。最后，我只是从该帖子列表中构建一些 HTML 并将其显示在 WebView 中。

虽然这完全可以正常工作，但图像存在问题：有时图像非常大，用户必须水平和垂直滚动才能看到整个图像。我想将这些图像的大小调整为 WebView 的宽度（以便它们始终完全可见），并可选择将它们转换为打开全尺寸图像的超链接。

由于我自己解析线程 HTML，理论上我可以获取每个 img 标签并为其添加“width=100%”属性。那么问题是小图像（例如表情符号！）也被调整大小并且被放大得非常大。我只想调整太大而无法在设备上显示的图像。

我怎样才能做到这一点？我能想到的一些方法（但不能完全达到所需的解决方案）当然是：

• 在 WebView 中显示之前修改帖子内容的 HTML，
• 更改 WebView 用于显示帖子内容的 CSS 样式表
• 将 javascript 添加到 WebView 源代码

基本上我可以完全访问 HTML、CSS 和 Javascript，但我仍然不知道如何调整太大的图像（但不是太大的图像）。

缩放不是问题，因为此 WebView 已禁用它。

有谁知道如何实现这种效果？谢谢！

Answer 1

您是否尝试在 HTML 文件中设置视口？

下面是一个示例，说明如何实现这一点，对于高密度、中密度和低密度设备，您可以设置最小规模、最大规模等参数。

function setViewPort() {
    var viewport = document.querySelector("meta[name=viewport]");

    //high-density screen
    if (window.devicePixelRatio == 1.5) {
        viewport.setAttribute("content", "target-densitydpi=high-dpi, width=device-width, height=device-height, initial-scale=1.15, minimum-scale=1.15, maximum-scale=1.8" );
    }
    //medium-density screen
    else if (window.devicePixelRatio == 1.00) {
        viewport.setAttribute("content", "target-densitydpi=low-dpi, width=device-width, height=device-height, initial-scale=1.3, minimum-scale=1.3, maximum-scale=1.3");
    }
    //low-density screen
    else if (window.devicePixelRatio == 0.75) {
        viewport.setAttribute("content", "target-densitydpi=device-dpi, width=device-width, height=device-height, maximum-scale=1.3");
    }}

还要查看 Android 文档 Targeting Screens from WebApps