150

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

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

4

16 回答 16

161

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

纯 CSS 解决方案

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

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}
<button>plain button</button>

<button class="disable-dbl-tap-zoom">button with disabled double-tap zoom</button>

<p>A <b>plain</b> paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

<p class="disable-dbl-tap-zoom">A paragraph <b>with disabled double-tap zoom</b>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

从touch-action文档（强调我的）：

操纵

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

此值适用于 Android 和 iOS。

于 2018-11-10T04:35:38.443 回答
64 
<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 上显示）。

于 2012-05-16T08:17:51.307 回答
40

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

我不是 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% 跨浏览器和平台。在大多数情况下，上面的代码应该可以用作复制粘贴解决方案，除非您希望在单击事件之前进行自定义行为。

于 2015-02-26T20:40:04.870 回答
29

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

(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）

于 2012-06-06T08:17:22.187 回答
29

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

  * {
      touch-action: manipulation;
  }

操纵

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

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

于 2019-01-15T22:35:29.097 回答
16

如果您需要一个不使用 jQuery的版本，我修改了Wouter Konecny 的答案（也是通过Johan Sundström修改此要点创建的）以使用 vanilla 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);
于 2016-09-29T19:50:25.960 回答
11

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

.disable-doubletap-to-zoom {
    touch-action: none;
}
于 2017-12-20T06:44:27.647 回答
9 
* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

禁用双击以放大触摸屏。包括互联网浏览器。

于 2020-04-07T07:34:54.000 回答
2

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

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

于 2016-08-24T19:54:48.503 回答
1

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

于 2018-04-23T08:01:15.757 回答
1

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

编辑：“dblclick”中的错字

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

button.addEventListener('dblclick', function(el) {
  el.preventDefault();
});
<button id="button"> No double click zoom here</button>

于 2021-06-15T13:55:01.267 回答
0

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

$('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"
            }

 });
于 2017-03-17T15:22:25.767 回答
0

目前，截至 2022 年，这是一种变体，可以在大多数设备版本上使用；安卓/iOS。请注意，例如 iOS 14+ 会放大任何字体大小小于 1rem 16px 的文本输入字段，这也是相当资深的专业人士似乎错过的。

一个普通的javascript示例 - 可以进一步改进 - 例如使用逻辑来允许正常行为场景 - 所以对于您的实验。

document.getElementById('selectorid').addEventListener('touchend' || 'dblclick', event => { 
event.preventDefault();
event.stopImmediatePropagation();
    }, {
    passive: false
    });

这是一个覆盖面更广的示例，用于测试目的，看看它是否达到了预期的结果。这会影响在 DOM 中继承的页面上的所有元素。

 /* For testing purposes, overrides events that may trigger a "zoom"; note that this may cause other unexpected behavior */
 window.addEventListener('touchmove' || 'touchdowm' || 'touchend' || 'mousedown' || 'dblclick', event => {
            event.preventDefault();
            event.stopImmediatePropagation();


        }, {
            passive: false
        });

这是一些简单的 CSS，用于覆盖测试目的- 在页面上尝试一下，如果表单字段是什么问题，您可能会期待补救线索。尽管 16px 的最小尺寸实际上是出于可访问性问题的一厢情愿。请注意，“！important”标志不被认为是在生产部署中体现的好习惯。

/* CSS to test prevention of zoom when interacting with input fields */
input[type=text] {
   font-size: 1rem !important; 
}
于 2022-02-07T20:38:42.350 回答
-1

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

我刚试过。

(1) 适用于 iOS 上的 Safari 和 Android 上的 Chrome，是首选方法。除了三星上的 Internet 应用程序外，它会禁用双击，而不是完全禁用双击<div>，但至少在处理轻击的元素上禁用。它返回return false，但有异常 ontext和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，Samsung）上的内置 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">
于 2017-08-16T13:58:31.250 回答
-2

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

于 2018-01-09T12:58:12.733 回答
-4

开始了

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

于 2016-11-02T10:40:17.350 回答