在 Android 4.4 的 Web 视图中单击表单时禁用缩放答案

【问题标题】：Disable zoom when clicking in a form in a Webview in Android 4.4在 Android 4.4 的 Web 视图中单击表单时禁用缩放
【发布时间】：2014-03-06 15:44:44
【问题描述】：

我的应用中有一个WebView，它在 HTML 中有一个带有可编辑文本字段的表单。当用户点击这些字段之一时，WebView 会略微放大，这是我不想要的。这仅在 Android 4.4 中发生，因为我正在为旧版本缩放 WebView（参见下面的代码）。

我见过Disable zoom when clicking on form fields within a WebView?，它解决了我对旧Android 版本的问题，使用WebSettings.setDefaultZoom(ZoomDensity.FAR) 解决了问题，但该设置在4.4 中已弃用。尽管如此，我已经尝试了多种组合，包括设置此属性，我的WebView 仍然被放大。

创建WebView的代码：

public View createView(float parentWidth) {

    mWebView = new ObservableWebView(mContext);
    mWebView.getSettings().setJavaScriptEnabled(true);

    //Listener for Console Messages
    mWebView.setWebChromeClient(new MyWebChromeClient());        

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT){
        mWebView.setInitialScale(Globals.convertDpToPx(100));
    } else{
        WebSettings settings = mWebView.getSettings();
        settings.setSupportZoom(false);
        settings.setBuiltInZoomControls(false);
        settings.setDisplayZoomControls(false);
    }

    loadURL();
    return mWebView;
}

public void loadURL() {
    mWebView.clearHistory();
    mWebView.removeAllViews();
    mWebView.loadUrl(mData.getUrl());       
}

提前感谢您的帮助。

【问题讨论】：

标签： android android-webview android-4.4-kitkat

【解决方案1】：

您可以在 HTML 页面的头部添加标签：

<meta name="viewport" content="user-scalable=no, width=device-width">

而且，如果您无法更改原始 HTML，您可以在页面加载到您的 WebViewClient 后运行一些 JavaScript 代码来更改它。比如：

@Override
public void onPageFinished(WebView view, String url) {
    view.loadUrl("javascript:"
    + "var newMeta = document.createElement('meta');"
    + "newMeta.setAttribute('name', 'viewport');"
    + "newMeta.setAttribute('content', 'user-scalable=no, width=device-width');"
    + "document.getElementsByTagName('head')[0].appendChild(newMeta);"
    );
    super.onPageFinished(view, url);
}

我已经在运行 KitKat 的三星 Galaxy Tab 4 10.1 上对其进行了测试。在其他设备上，此代码会产生一些副作用，因此最好仅在使用 KitKat 或更高版本时执行它。

【讨论】：

我在 android 5.1 上遇到了同样的问题，你的 onPageFinished 解决方案解决了这个问题。谢了！

【解决方案2】：

您是否尝试过通过设置viewport meta tag 来禁用缩放？

<meta name="viewport" content="width=device-width, user-scalable=no">

您需要致电settings.setUseWideViewport(true); 才能生效。

【讨论】：

很遗憾，我无法更改 HTML。我试过settings.setUseWideViewport(true) 无济于事。我承认允许用户放大 4.4。这并不理想，但也不是世界末日。