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

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

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

178556 次浏览
小开 
<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 上显示)。

小开
最佳答案

我只是想正确地回答我的问题，因为有些人没有阅读下面的评论。所以，事情是这样的:

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

小开

我知道这可能有点老套但我找到了一个非常适合我的解决方案。不需要疯狂的元标签和停止内容缩放。

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

小开

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

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

小开

如果您需要 没有 jQuery 也能工作的版本，我修改了 Water Konecny 的回答(也是通过 Johan Sundström修改 这个要点而创建的)以使用普通的 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);
小开

开始了

< meta name = “ viewport”content = “ width = device-width，first-scale = 1，max-scale = 1，user-scalable = no”>

小开

这将防止双击放大元素在’身体’这可以改变到任何其他选择器

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

在触摸开始，我添加了代码，以防止缩放和触发点击。

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


});
小开

我假设我确实有一个包含文本、滑块和按钮的 <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)对于安卓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 属性 touch-action设置为 none，如另一个答案 https://stackoverflow.com/a/42288386/1128216所述

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

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

小开

如果有任何人像我一样使用 Vue.js遇到这个问题, 简单地加上 。防止就可以了: @click.prevent="someAction"

小开

注意(截至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。

小开

CSS 禁用全局双击缩放(对任何元素) :

  * {
touch-action: manipulation;
}

操纵

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

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

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

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

小开

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

编辑: 在“ dblclick”中输入错误

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


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

小开

到2022年为止，这里有一个在大多数设备版本上都有效的变体: Android/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 的最小大小实际上是出于易访问性的考虑而故意设置的。请注意“ ！重要”标志不被认为是在生产部署中显示的良好实践。

/* CSS to test prevention of zoom when interacting with input fields */
input[type=text] {
font-size: 1rem !important;
}
小开

不幸的是，上面的大部分代码都不能工作 这些简单的行 < strong > 就可以了

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

提交答案