设置 webview 的最小缩放级别 (Android)答案

【问题标题】：Set minimum zoom level of webview (Android)设置 webview 的最小缩放级别 (Android)
【发布时间】：2013-11-04 19:24:18
【问题描述】：

我想用来显示图像并使其可缩放的 WebView 有一个奇怪的问题。我的 Activity 中有以下方法：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_manual);

    WebView webView = (WebView)findViewById(R.id.webView);      
    webView.loadUrl("file:///android_res/drawable/some_image.jpg");
    webView.setInitialScale(getScale());
    webView.getSettings().setBuiltInZoomControls(true);
}

getScale() 方法计算我可以与webView.setInitialScale() 一起使用的比例，以将我的图像精确缩放到全屏宽度，并且它可以工作。内置的缩放控件在某种程度上也可以工作，但是：

放大图像后，我无法缩小回初始比例，我认为是因为最小比例大于我的初始比例。

使用 WebSettings 设置缩放密度并没有帮助，我认为即使它在我的手机上也不会在其他手机上。

我还尝试过：我制作了一个 HTML 页面，其中包含图片作为 body 元素的唯一子元素。我将它的宽度设置为 100%，并以这种方式正确缩放。但是，如果我再次放大，图像会立即调整大小以再次适合屏幕宽度。

我找到了一些答案，但没有一个真正有帮助：

    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setDefaultZoom(ZoomDensity.FAR);
    webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

一个解决方案提到了使用反射来更改 WebView 类以忽略限制，但我担心这可能会在某些旧版本的 Android 上破坏我的应用程序。我必须兼容低至 API 级别 9 的设备。

【问题讨论】：

标签： android webview zooming minimum

【解决方案1】：

我想我找到了适合大多数情况的解决方案，只要我们只想加载单个图像。这是一种解决方法，在调整图像大小时会丢失一些图像细节。尽管如此，它应该可以在大多数设备上运行。

我按照将图像嵌入基本 HTML 页面的方法，并用屏幕宽度（以像素为单位）填充 <img> 标记。为简单起见，我跳过了从文件中加载 HTML，而是在我的 Java 代码中生成了它：

private String generatePage() {
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int displayWidth = display.getWidth();

    String result =
            "<html>"
            + "<meta name=\"viewport\" content=\"target-densitydpi=device-dpi,width=device-width\">"
            + "<head>"
            + " <title>Title</title>"
            + "</head>"
            + "<body>"
            + "<image id=\"myImage\" src=\"drawable/image.jpg\" width=\"" + displayWidth + "px\" />"
            + "</body>"
            + "</html>";
    return result;
}

我将此方法添加到我的 Activity 中，并使用它来生成与它运行的设备匹配的代码。 onCreate() 方法现在可以非常简单：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_manual);

    WebView webView = (WebView)findViewById(R.id.webView);

    webView.loadDataWithBaseURL("file:///android_res/", generatePage(), "text/html", "utf-8", null);
    webView.getSettings().setBuiltInZoomControls(true);
}

重要提示：您需要牢记两个细节，否则将不起作用。

需要使用webView.loadDataWithBaseURL(...)的方法，否则无法访问HTML里面的本地android资源。这样src 属性就无法指向您的图像文件。
您需要在 HTML 代码中添加标签 <meta name="viewport" content="...">，并且必须在其 content 属性中包含 target-densitydpi=device-dpi。否则图像的大小可能仍然与您的视口不匹配。

注意：您也可以在viewporttag 中指定minimal-scale，这确实影响了我的webview。坏事：至少在运行 Jelly Bean 4.1.2 的 Galaxy S3 mini 上，小于 1.0 的minimal-scale 没有效果。

【讨论】：

【解决方案2】：

这可能是您正在搜索的内容

settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setUseWideViewPort(true);
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);

【讨论】：