在触摸设备的浏览器中禁用双击“缩放”选项答案

【问题标题】：Disable double-tap "zoom" option in browser on touch devices在触摸设备的浏览器中禁用双击“缩放”选项
【发布时间】：2012-05-23 18:37:41
【问题描述】：

我想禁用双击缩放功能指定元素在浏览器（在触摸设备上），不禁用所有缩放功能。

例如：一个元素可以被多次点击以使某件事发生。这在桌面浏览器上运行良好（如预期的那样），但在触摸设备浏览器上，它会放大。

【问题讨论】：

虽然不是缩放，但这里有一些其他重要的 - `-webkit-touch-callout: none; -webkit-文本大小调整：无； -webkit-user-select：无；
它可能会有所帮助（在我的情况下确实如此）：但我注意到双击问题只存在于 div 上，而不存在于画布上。

标签： html browser touch zooming

【解决方案1】：

<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
etc...
</head>

我最近使用过它，它在 iPad 上运行良好。尚未在 Android 或其他设备上进行测试（因为该网站将仅在 iPad 上显示）。

【讨论】：

这将禁用所有缩放功能，不幸的是这不是我的问题。我只想禁用指定的元素。
喂，废话。我反过来读了，失败在我身上。对不起！
这个解决方案怎么样？它只是iOS，但也许可以调整？：gist.github.com/2047491
@WouterKonecny 如果您删除 useragent 检查它应该可以在任何支持 touchstart 事件的设备上工作。要检测这些设备，您可以使用类似isEventSupported
Apple 现在正式忽略了这一点。 github.com/w3c/html/issues/602

【解决方案2】：

我只是想正确回答我的问题，因为有些人没有阅读答案下方的 cmets。所以这里是：

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) return; // not double-tap

        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click').trigger('click');
      });
  };
})(jQuery);

这不是我写的，我只是修改了它。我在这里找到了仅限 iOS 的版本：https://gist.github.com/2047491（感谢 Kablam）

【讨论】：

这似乎行不通，至少在 SIII（带 Android 4.0.4）上不行。我尝试绑定到文档、正文、窗口、*、没有骰子。
我也试过，适用于 safari/ipad、android chrome 但不适用于 android 默认浏览器
jquery 不是 javascript，如果有一个例子来说明如何在没有库的情况下做到这一点，那就太好了
寻找非 jquery 版本:-(
再一次，jQuery 不是 javascript，不应该被鼓励，因为它不适用于基于更现代理念（如 Angular）的网站。阅读问题

【解决方案3】：

我知道这可能已经过时了，但我找到了一个非常适合我的解决方案。无需疯狂的元标记和停止内容缩放。

~~我不能 100% 确定它是如何跨设备的~~，但它完全按照我的意愿工作。

$('.no-zoom').bind('touchend', function(e) {
  e.preventDefault();
  // Add your code here. 
  $(this).click();
  // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})

这将简单地禁用正常点击功能，然后再次调用标准点击事件。这可以防止移动设备缩放，但可以正常工作。

编辑：现在已经过时间测试并在几个实时应用程序中运行。似乎是 100% 跨浏览器和平台。上面的代码在大多数情况下应该可以用作复制粘贴解决方案，除非您希望在点击事件之前自定义行为。

【讨论】：

这会禁用点击，对不起，我认为这不是一个好的解决方案
你不需要JS来做你只需设置CSS属性pointer-events: none
感谢您在不禁用整个页面缩放的情况下完美地处理增量/减量按钮。
这个解决方案的问题是，如果你正在滚动页面并且你的手指碰巧在按钮上，它会认为你点击了它。
如果我没看错的话，这可能会在您需要受信任事件的某些情况下失败（例如单击某事触发全屏或其他实验，因为 yneed 受信任事件意味着由用户触发/操作系统）

【解决方案4】：

简单阻止click、dblclick 或touchend 事件的默认行为将禁用缩放功能。

如果您已经对其中一个事件进行了回调，只需调用event.preventDefault()。

【讨论】：

这对我有用。我在按钮上定义了自己的 touchstart 事件，我想禁用缩放功能。

【解决方案5】：

如果您需要一个不使用 jQuery 的版本，我修改了 Wouter Konecny's answer（也是通过 Johan Sundström 修改 this gist 创建的）以使用原生 JavaScript。

function preventZoom(e) {
  var t2 = e.timeStamp;
  var t1 = e.currentTarget.dataset.lastTouch || t2;
  var dt = t2 - t1;
  var fingers = e.touches.length;
  e.currentTarget.dataset.lastTouch = t2;

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}

然后在touchstart 上添加一个事件处理程序来调用这个函数：

myButton.addEventListener('touchstart', preventZoom);

【讨论】：

太棒了。只是想提一下，我需要添加一个 addEventListener 才能调用它。 myButton.addEventListener('touchstart', preventZoom);

【解决方案6】：

我们来了

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

【讨论】：

【解决方案7】：

这将防止双击放大“正文”中的元素，这可以更改为任何其他选择器

$('body').bind('touchstart', function preventZoom(e){
            var t2 = e.timeStamp;
            var t1 = $(this).data('lastTouch') || t2;
            var dt = t2 - t1;
            var fingers = e.originalEvent.touches.length;
            $(this).data('lastTouch', t2);
            if (!dt || dt > 500 || fingers > 1){
                return; // not double-tap
            }
            e.preventDefault(); // double tap - prevent the zoom
            // also synthesize click events we just swallowed up
            $(e.target).trigger('click');

});

但这也阻止了我的点击事件在多次点击时触发，所以我必须绑定另一个事件来触发多次点击事件

$('.selector').bind('touchstart click', preventZoom(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
      // Handle touchstart event.
    } else if(e.type == "click") {
      // Handle click event.
    }
});

在 touchstart 上，我添加了防止缩放和触发点击的代码。

$('.selector').bind('touchstart, click', function preventZoom(e){
            e.stopPropagation(); //stops propagation
            if(e.type == "touchstart") {
                // Handle touchstart event.
                var t2 = e.timeStamp;
                var t1 = $(this).data('lastTouch') || t2;
                var dt = t2 - t1;
                var fingers = e.originalEvent.touches.length;
                $(this).data('lastTouch', t2);


                if (!dt || dt > 500 || fingers > 1){
                    return; // not double-tap
                }

                e.preventDefault(); // double tap - prevent the zoom
                // also synthesize click events we just swallowed up
                $(e.target).trigger('click');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });

【讨论】：

【解决方案8】：

我假设我确实有一个 <div> 输入容器区域，其中包含文本、滑块和按钮，并且想要禁止在该 <div> 中意外双击。以下内容不禁止对输入区域进行缩放，也与在我的<div> 区域外双击和缩放无关。因浏览器应用而异。

我刚试过。

(1) 适用于 iOS 上的 Safari 和 Android 上的 Chrome，并且是首选方法。除了三星上的 Internet 应用程序外，它在完整的<div> 上禁用双击，但至少在处理轻击的元素上禁用双击。它返回return false，但text 和range 输入除外。

$('selector of <div> input area').on('touchend',disabledoubletap);

function disabledoubletap(ev) {

    var preventok=$(ev.target).is('input[type=text],input[type=range]');

    if(preventok==false) return false; 
}

(2) 对于 Android（5.1，三星）上的内置 Internet 应用程序（可选），禁止双击 <div>，但禁止缩放 <div>：

$('selector of <div> input area').on('touchstart touchend',disabledoubletap);

(3) 对于 Android 5.1 上的 Chrome，完全禁用双击，不禁止缩放，并且在其他浏览器中对双击不执行任何操作。 <meta name="viewport" ...> 的双击抑制很烦人，因为 <meta name="viewport" ...> 似乎是个好习惯。

<meta name="viewport" content="width=device-width, initial-scale=1, 
          maximum-scale=5, user-scalable=yes">

【讨论】：

【解决方案9】：

您应该将 css 属性 touch-action 设置为 none，如其他答案 https://stackoverflow.com/a/42288386/1128216 中所述

.disable-doubletap-to-zoom {
    touch-action: none;
}

【讨论】：

这行得通...但是如果我想禁用缩放，但留下其他触摸事件怎么办？我有一张大桌子，这也禁用了滚动。
如果您只想摆脱双击缩放，您应该将值设置为“触摸动作：操纵；”这仍然允许平移和捏缩放。重要提示：这也有助于摆脱为实现双击缩放而引入的点击延迟浏览器。见developer.mozilla.org/en-US/docs/Web/CSS/touch-action
这个类应该添加到什么HTML标签上？
我认为您可以将其添加到您不希望使用放大的任何元素中。例如，在我的例子中，我不希望用户放大我页面的任何部分，所以我将它添加到 body 标记中。

【解决方案10】：

使用 CSS 触摸事件：无完全取出所有的触摸事件。只是把这个留在这里，以防有人也有这个问题，我花了 2 个小时才找到这个解决方案，它只是一行 css。 https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

【讨论】：

【解决方案11】：

如果有人像我一样在使用 Vue.js 时遇到此问题，只需添加 .prevent 即可：@click.prevent="someAction"

【讨论】：

【解决方案12】：

注意（截至 2020 年 8 月 4 日）：此解决方案似乎不适用于 iOS Safari v12+。一旦找到涵盖 iOS Safari 的明确解决方案，我将更新此答案并删除此注释。

纯 CSS 解决方案

将touch-action: manipulation 添加到要禁用双击缩放的任何元素，例如使用以下disable-dbl-tap-zoom 类：

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

来自touch-action 文档（重点是我的）：

操纵

启用平移和捏合缩放手势，但禁用其他非标准手势，例如双击缩放强>。

此值适用于 Android 和 iOS。

【讨论】：

@SergoPasoevi，你能创建一个不起作用的例子吗？我正在为 iOS 12 使用这个解决方案，它对我有用。
我看到与@SergoPasoevi 相同的问题，不适用于 iOS 12
用触摸动作包裹你的整个身体有什么缺点：操纵？
在最新的 iOS 上双击图像时不起作用。
像这样应用时在 iOS 14.6（手机，不是平板电脑，使用 Safari）上运行良好：input[type="button"]{ touch-action: manipulation; }。我可以双击页面上的其他地方，它会缩放或有时选择，但是当点击或什至只是靠近按钮时，它总是会触发按钮而不做任何其他事情。对于未来的读者，也许您可以更新顶部的编辑，说它适用于按钮，但可能（因为 Adam Silver 说它不适用于图像）不适用于其他元素？

【解决方案13】：

CSS 全局禁用双击缩放（在任何元素上）：

  * {
      touch-action: manipulation;
  }

操纵

启用平移和捏合缩放手势，但禁用其他非标准手势，例如双击缩放。

谢谢罗斯，我的回答延伸了他的：https://stackoverflow.com/a/53236027/9986657

【讨论】：

这应该被标记为答案。我尝试只将它放在 html 和 body 上，但它在 iOS 13.2 中不起作用。这行得通。
这本身在 iOS 13 上不起作用，但结合此代码，它会阻止点击以完全缩放 React 应用程序。 document.getElementById('root').addEventListener('click', () => {})
苹果在ios13上禁用点击放大，怎么能说在iOS13上不行？
为我工作 - 2020 年 9 月在 iOS Safari 上
@michaelmcgurk 这对你有用吗？我无法让它在 iOS 14 上为我工作。双击任何元素（如 div/标题）仍然会导致双击放大

【解决方案14】：

* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

禁用双击放大触摸屏。包括 Internet Explorer。

【讨论】：

【解决方案15】：

如果您只想防止在所有设备上双击缩放，请尝试将按钮的dblclick 事件侦听器设置为preventDefault()。这对我有用！

编辑：“dblclick”中的错字

const button = document.querySelector('#button');

button.addEventListener('dblclick', function(el) {
  el.preventDefault();
});

&lt;button id="button"&gt; No double click zoom here&lt;/button&gt;

【讨论】：