Android Webview - 如果图像太大,请调整图像大小

时间:2012-09-27 10:01:27

标签: java android image webview image-resizing

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

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

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

我怎样才能做到这一点?我能想到的一些方法(但不能达到理想的解决方案)当然是:

  • 修改帖子内容的HTML,然后在WebView中显示
  • 更改WebView用于显示帖子内容的CSS样式表
  • 将javascript添加到WebView源

基本上我可以完全访问HTML,CSS和Javascript,但我仍然无法弄清楚如何调整太大的图像(但不是太大的图像)。

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

有谁知道如何实现这种效果?谢谢!

1 个答案:

答案 0 :(得分:2)

您是否尝试在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