单击 WebView 中的表单字段时禁用缩放？

Posted 2023-04-18

【中文标题】单击 WebView 中的表单字段时禁用缩放？

【英文标题】：Disable zoom when clicking on form fields within a WebView?

【发布时间】：2011-06-17 07:17:27

【问题描述】：

如果类似的问题，我已经浏览了几十页，但没有一个有任何答案，所以希望这个会有所不同。

我有一个 web 视图，我不希望视图的缩放从我设置的初始缩放级别发生变化。 当前唯一改变缩放级别的是文本框获得焦点时。

我需要能够通过 Java 代码做到这一点，而不是使用 viewport 元标记。

所以我没有共同的反应，我在我的代码中有以下禁用缩放和缩放控件：

mWebView.getSettings().setBuiltInZoomControls(false);
mWebView.getSettings().setSupportZoom(false);

我认为一个可能的解决方案是检查 WebView 中何时发生 onFocus 甚至 onClick 事件，然后再进行缩放，但我什至不确定这是否可能？

任何建议将不胜感激。

【问题讨论】：

请注意，这似乎只发生在 HTC 设备（难以置信，EVO）上。该应用程序在模拟器和 3 台 Motorola android 设备（Droid X、Droid Pro、Original Droid、Droid 2）上运行良好。

实际上，我说得太早了——这个问题是由 Sense UI（由 HTC 提供）引起的，现在可以在 Galaxy 上使用，不过我没有。如果你禁用它，我的问题就会消失。

@evolve：您的缩放级别更改会在您的 WebViewClient 中触发 onScaleChanged() 吗？

禁用缩放还解决了我在 4.0 之前的设备中在 WebView 中使用响应式设计时遇到的问题。

【参考方案1】：

更新 这个答案几乎是 6 年前写的，从那时起所有新的 android 版本，这很可能已经过时了。

这件事引起了很大的头疼，但感谢setDefaultZoom(ZoomDensity.FAR);终于解决了

重要的一点是onCreate 和loadUrl 在WebSettings 之前被调用，否则会导致强制关闭情况。这里是 ENTIRE 代码，包括导入（针对 Java 新手用户）

package com.my.app;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;

import com.phonegap.*;

public class MyDroidActivity extends DroidGap 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
        WebSettings settings = appView.getSettings();
        settings.setBuiltInZoomControls(false);
        settings.setSupportZoom(false);
        settings.setDefaultZoom(ZoomDensity.FAR);
    

【讨论】：

这可以按原样工作，但是如果您在让您的应用程序最初扩展并使用此修复程序时遇到问题：uihacker.blogspot.com/2011/01/… 那么此修复程序将不再起作用 :( 我一直在拉扯我的头发这个。

【参考方案2】：

我在 HTC 手机上通过为 onScaleChanged 添加一个带有空侦听器的 WebViewClient 解决了这个问题。我的应用是 PhoneGap，所以它看起来是这样的，但是在非 PhoneGap 应用中添加监听器应该看起来一样：

public class Main extends DroidGap 

private class NoScaleWebViewClient extends GapViewClient 

    public NoScaleWebViewClient(DroidGap ctx) 
        super(ctx);
    

    public void onScaleChanged(WebView view, float oldScale, float newScale) 
        Log.d("NoScaleWebViewClient", "Scale changed: " + String.valueOf(oldScale) + " => " + String.valueOf(newScale));
    


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);
    getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    this.init();
    setWebViewClient(appView, new NoScaleWebViewClient(this));
    // disables the actual onscreen controls from showing up
    appView.getSettings().setBuiltInZoomControls(false);
    // disables the ability to zoom
    appView.getSettings().setSupportZoom(false);
    appView.getSettings().setDefaultZoom(ZoomDensity.FAR);
    appView.setInitialScale(100);

奇怪的是，onScaleChange 监听器从未被调用——通过监听缩放，它阻止了缩放的发生。我发现我需要所有其他调用（setSupportZoom、setDefaultZoom、setInitialScale）才能使其正常工作，并且删除它们中的任何一个都会恢复到旧的、错误的行为。

【讨论】：

如果我在不覆盖 WebViewClient 的情况下完成所有这些设置，它对我有用

【参考方案3】：

我也遇到了同样的问题。我需要找到一种方法将 webview 的内容缩放到确切的值，在用户开始输入文本之前一切正常。有些方法适用于相对较新的设备 android 4.0+，但在旧设备上失败。在任何地方都可以使用的唯一方法是设置缩放值，而不是在 Java 中，而是在这样的视口中

<meta name="viewport" content="initial-scale=.80; maximum-scale=.80; minimum-scale=.80;" />

它适用于我测试的每台设备。

【参考方案4】：

您是否尝试在视口标签中禁用用户可缩放？不确定这是否对你有用，但它对我有用。我不需要在 java 端做任何事情。

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

【讨论】：

HTC 设备（任何使用 Sense UI 用户界面的设备）上仍会出现此问题。

【参考方案5】：

我也遇到过这个问题，我是这样解决的：

myWebview.getSettings().setDefaultZoom(ZoomDensity.FAR);

在三星 Galaxy Tab 上运行正常。我希望这会对你有所帮助。

【参考方案6】：

WebView 有一个特殊的“东西”，我认为它会在这里引发很多问题和答案。发生的情况是，当一个 URL 被加载时，默认的 Android 浏览器会通过一个 Intent 来处理这个问题。 缩放会在此浏览器中进行，而不是在您的 Web 视图中。

解决方案：您需要添加一个WebviewClient 来告诉 Android 您自己处理浏览。一个例子：

// Use WebView and disable zooming

public class MyWebView extends Activity 
    // nested class
    private class HelloWebViewClient extends WebViewClient 
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) 
        view.loadUrl(url);
        return true
        
    

    private WebView mWebView;

    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebViewClient(new HelloWebViewClient());
        mWebView.setInitialScale(500);   // added after user comment

        mWebView.getSettings().setjavascriptEnabled(true);
        mWebView.getSettings().setBuiltInZoomControls(false);
        mWebView.getSettings().setSupportZoom(false);

        mWebView.loadUrl("http://www.google.com");      

    

我的 ma​​in.xml 看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_
    android:layout_
/>

此代码禁用了我运行 Android 2.2 的 HTC Desire 的缩放功能。点击 HTML 输入字段没有任何区别。

WebView/HelloWebViewClient 的整个主题以及正确处理“后退”按钮的重要提示都记录在Hello Views, Web View 中。任何使用 WebView 的人都应该阅读它。

【讨论】：

对不起，我不是粗鲁的意思，但是你真的理解这个问题吗？我的意思是，问题在于，不仅仅是“禁用缩放”。这是为了避免某些行为，当用户按下 html 输入字段时，某些设备（主要是 HTC）会自动缩放到 100%。在您给出的示例中，这不会发生，因为开始时缩放已经 100%。

再次查看我的代码后，我意识到我实际上已经在这样做了，并且它适用于任何非 HTC 设备。它无法在 HTC 设备上运行的原因似乎是 Sense UI 用户界面的一个已知错误，该界面显然在基本 android 代码之上运行。

mdelolmo：你是对的。我无法重现您的问题，因此回答了不符合您兴趣的问题。当我在这种情况下设置初始比例时，它保持不变 - 无论是否在 html 输入字段中点击。也许您可以提供代码来重现问题，尤其是代码中设置缩放级别的位置以及带有触发您描述的行为的输入字段的 URL。正如我上面所写，我正在使用 HTC。

@rgr_mt 将<meta name="viewport" content="user-scalable=no, width=device-width" /> 添加到您正在加载的页面的 HTML 中，您将看到问题。

所以这个问题只有在设置了这个 HTML5 元标记时才会发生？您愿意将这些重要信息放入问题中吗？我现在将您的问题读为“使用视口元标记将其比例（通过将视口设置为准确）设置为 A 的 HTML 页面和将其比例设置为 B 的 SDK 缩放参数 - 参数矛盾 - 似乎有问题”。我想这是不可避免的，只要没有定义哪个机制应该覆盖另一个机制。 quirksmode.org/mobile/viewports.html 可能会有所帮助。

【参考方案7】：

我相信您可以使用WebView.setInitialScale 方法设置缩放级别。它需要一个 int 作为比例，所以我想你会想做类似myWebView.setInitialScale(100) 的事情。

【参考方案8】：

此问题已通过 HTC 设备上的固件更新得到修复，它（显然）是由 Sense UI 错误地覆盖默认 Android 功能引起的。

很难提供有关何时更正此问题的确切信息，但是当在任何具有最新固件的 HTC 设备上单击文本框时，我的 Web 应用程序不再缩放。

以下两行代码将禁用 android webview 的“缩放”方面：

// disables the actual onscreen controls from showing up
mWebView.getSettings().setBuiltInZoomControls(false);
// disables the ability to zoom
mWebView.getSettings().setSupportZoom(false);

【参考方案9】：

这对我来说也很头疼，但幸运的是我找到了这篇文章：How to stop zoom in on input focus on mobile devices。

在 css 文件中将 input 元素中文本的字体大小设置为 16px（或更大）。

  input 
        font-size: 16px;

这是相当黑客，但如果没有其他工作......