在触摸设备上的浏览器中禁用双击"zoom"选项

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

例如：一个元素可以多次点击以发生某些事情。这在桌面浏览器上工作正常(如预期的那样(，但在触摸设备浏览器上，它会放大。

注意

(截至2020-08-04(：此解决方案似乎不适用于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。

<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 上显示(。

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

  * {
      touch-action: manipulation;
  }

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

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

我知道

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

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

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

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

如果你

需要一个没有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);

您应该将

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

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

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

禁用双击以缩放触摸屏。包括IE浏览器。

在移动设备上禁用双击缩放(2023 IOS Safari 解决方案(：

我发现使用元标记方法对于移动野生动物园浏览器来说不是一个可行的解决方案。这是对我有用的解决方案。

工作解决方案：

.selector {
   touch-action: manipulation;
}

通过简单地添加操作的触摸操作，应用了以下规则的所有按钮将不会在连续单击按钮时缩放。

示例网站：计算器应用

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

编辑："dblclick"中的错别字

const button = document.querySelector('#button');
button.addEventListener('dblclick', function(el) {
  el.preventDefault();
});

<button id="button"> No double click zoom here</button>

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

如果您已经对此事件之一进行了回调，只需调用 event.preventDefault() 即可。

不幸的是，

上面的大多数编码都不起作用这些简单的线条就可以做到

document.addEventListener('dblclick', function(event) {
    event.preventDefault();
}, { passive: false });

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

这将防止双击"body"中的元素缩放，这可以更改为任何其他选择器

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

这是一个变体，截至 2022 年，目前在大多数设备版本上都可以解决问题;安卓/苹果。请注意，例如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; 
}

我假设我确实有一个<div>输入容器区域，其中包含文本、滑块和按钮，并希望禁止在该<div>中意外双击。以下内容不会阻止缩放输入区域，并且与双击和缩放到我的<div>区域之外无关。根据浏览器应用程序的不同，存在差异。

我刚刚试过了。

(1(适用于iOS上的Safari和Android上的Chrome，并且是首选方法。除三星上的互联网应用程序外，它禁用双击不是在全<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，三星(上的内置互联网应用程序，可以选择禁止在<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">

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

我们来了

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

相关内容

最新更新

热门标签：