为什么双指缩放在我的 Android WebView 中不起作用？答案

【问题标题】：Why does pinch-to-zoom not work in my Android WebView?为什么双指缩放在我的 Android WebView 中不起作用？
【发布时间】：2014-12-01 20:27:25
【问题描述】：

我有一个布局如下的活动：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <include  layout="@layout/window_title" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true" 
        android:layout_below="@+id/linear_layout"/>

</RelativeLayout>

这是我的配置方式：

    // Enable JavaScript.
    WebView myWebView = (WebView) findViewById(R.id.webView);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    // Settings so page loads zoomed-out all the way.
    webSettings.setLoadWithOverviewMode(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setBuiltInZoomControls(true);

这是我的清单文件中的版本设置：

<uses-sdk
    android:minSdkVersion="10"
    android:targetSdkVersion="17" />

我正在尝试在 WebView 中加载此页面：

https://new.livestream.com/lcboise

页面加载正常，但我无法缩放。我尝试了 WebView 设置的不同组合（以上，包括未列出的其他设置），但它就是无法缩放。

观察：

1) 在完全相同的 WebView 中加载我正在使用的不同页面 (https://lcboise.infellowship.com/UserLogin) 允许我进行缩放。

2) 我的主要测试设备是 HTC One，运行 v4.4.3 的 Android。

3) 我可以在运行 Android v2.3.3 的旧测试设备上加载和缩放直播页面。

页面本身是否有可能破坏了 HTC One 上运行的 WebView？如果是这样，有什么猜测可能会这样做吗？

更新[解决方案]：

这是我必须添加到我的 WebView 以使捏合缩放工作的内容：

    myWebView.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {
            String javascript="javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');";
            view.loadUrl(javascript);
        }
    });

【问题讨论】：

加一个问题..
感谢您的问题和解决方案！您的 sn-p 实际上可以通过手指启用 webview 缩放，但是除了 webview 原生按钮之外，它还添加了一个额外的放大/缩小按钮。你知道有什么方法可以禁用它们吗？

标签： android android-webview

【解决方案1】：

这是您链接的页面，具有以下视口元标记：

<meta name="viewport" content="width=1024, maximum-scale=1.0, target-densitydpi=device-dpi">

有效的页面具有不同的视口元标记。 maximum-scale 位告诉 WebView 不允许放大超过指定的数量。

该网站也应该在任何现代移动浏览器中被破坏。将 maximum-scale 设置为这样的低值并不是非常“移动友好”，因此它可能只是网站上的一个错误。您是否尝试过联系所有者，也许他们可以在服务器端修复它？

您可以在 WebView 中执行的所有操作都不会导致其他网站呈现不正确。您可以尝试注入 JavaScript 以通过 changing the meta tag 修复页面作为最后的手段。

【讨论】：

感谢您的回复！就像你说的那样，我最终不得不在页面中注入一些 Javascript。请参阅上面的更新以查看我放入其中的确切代码。
你的回答对我有帮助，加1

【解决方案2】：

添加这两行以启用缩放以放大 web 视图

webview.getSettings().setSupportZoom(true);
webview.getSettings().setBuiltInZoomControls(true);

【讨论】：

【解决方案3】：

你试过这个建议吗？

webSettings.setSupportZoom(true);

见Disable pinch zoom in WebView?

请注意，该链接是关于禁用缩放的。但也许您的缩放默认情况下会像一些用户建议的那样被禁用。

【讨论】：

感谢您的回复！不幸的是，这不起作用。就像我上面说的，我有点困惑，为什么我可以在确切的 Activity 中在确切的 WebView 中加载不同的页面并且它缩放得很好。乍一看，这似乎暗示网页本身就是问题的根源。

【解决方案4】：

wv.getSettings().setBuiltInZoomControls(true);
wv.getSettings().setDisplayZoomControls(false);

对我来说完美无缺。

【讨论】：

【解决方案5】：

在我的问题上，由于视口限制，我成功完成了上述 JavaScript 注入。不知何故 onPageFinished 在我的情况下不起作用，但 onLoadResource 成功了。

@Override
public void onLoadResource(WebView view, String url) {
    view.loadUrl("javascript:document.getElementsByName(\"viewport\")[0].setAttribute(\"content\", \"width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes\");");
    super.onLoadResource(view, url);
}

【讨论】：

【解决方案6】：

对于缩放：

webSettings.getSettings().setBuiltInZoomControls(true);

禁用：

webSettings.getSettings().setBuiltInZoomControls(false);

【讨论】：

【解决方案7】：

要在 Android WebView 上进行缩放，所需的唯一设置是：

webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
确保 HTML 标头 viewport 具有正确的值；
如果您在加载后更改设置，请确保从 UIThread 调用；

【讨论】：