Html 在触摸设备上的浏览器中禁用双击“缩放”选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10614481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable double-tap "zoom" option in browser on touch devices
提问by Wouter Konecny
I want to disablethe double-tap zoomfunctionality on specified elementsin the browser (on touch devices), without disabling all the zoom functionality.
我想禁用浏览器中指定元素的双击缩放功能（在触摸设备上），而不禁用所有缩放功能。
For example: One element can be tapped multiple times for something to happen. This works fine on desktop browsers (as expected), but on touch device browsers, it will zoom in.
例如：一个元素可以被多次点击以发生某事。这在桌面浏览器上运行良好（如预期），但在触摸设备浏览器上，它会放大。
采纳答案by Wouter Konecny
I just wanted to answer my question properly as some people do not read the comments below an answer. So here it is:
我只是想正确回答我的问题，因为有些人没有阅读答案下方的评论。所以这里是：
(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);
I did not write this, i just modified it. I found the iOS-only version here: https://gist.github.com/2047491(thanks Kablam)
这不是我写的，我只是修改了它。我在这里找到了仅限 iOS 的版本：https://gist.github.com/2047491（感谢 Kablam）
回答by Ross Allen
Modern (as of April 2019), CSS-only solution
现代（截至 2019 年 4 月），仅限 CSS 的解决方案
Add touch-action: manipulationto any element on which you want to disable double tap zoom, like with the following disable-dbl-tap-zoomclass:
添加touch-action: manipulation到要禁用双击缩放的任何元素，例如以下disable-dbl-tap-zoom类：
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
From the touch-actiondocs (emphasis mine):
从touch-action文档（强调我的）：
manipulation
Enable panning and pinch zoom gestures, but disableadditional non-standard gestures such as double-tap to zoom.
操纵
启用平移和捏缩放手势，但禁用其他非标准手势，例如双击缩放。
This value works on Android and on iOS.
此值适用于 Android 和 iOS。
回答by Kablam
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
etc...
</head>
I've used that very recently and it works fine on iPad. Haven't tested on Android or other devices (because the website will be displayed on iPad only).
我最近使用过它，它在 iPad 上运行良好。尚未在 Android 或其他设备上进行测试（因为该网站将仅在 iPad 上显示）。
回答by Rockster160
I know this may be old, but I found a solution that worked perfectly for me. No need for crazy meta tags and stopping content zooming.
我知道这可能很旧，但我找到了一个非常适合我的解决方案。不需要疯狂的元标记和停止内容缩放。
I'm not 100% sure how cross-device it is, but it worked exactly how I wanted to.
我不是 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.
})
This will simply disable the normal tapping function, and then call a standard click event again. This prevents the mobile device from zooming, but otherwise functions as normal.
这将简单地禁用正常点击功能，然后再次调用标准点击事件。这可以防止移动设备缩放，但其他功能正常。
EDIT: This has now been time-tested and running in a couple live apps. Seems to be 100% cross-browser and platform. The above code should work as a copy-paste solution for most cases, unless you want custom behavior beforethe click event.
编辑：这现在已经过时间测试并在几个实时应用程序中运行。似乎是 100% 跨浏览器和平台。上面的代码应该在大多数情况下用作复制粘贴解决方案，除非您想要在单击事件之前自定义行为。
回答by Evrim Persembe
If you need a version that works without jQuery, I modified Wouter Konecny's answer(which was also created by modifying this gistby Johan Sundstr?m) to use vanilla JavaScript.
如果您需要一个不使用 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();
}
Then add an event handler on touchstartthat calls this function:
然后添加一个touchstart调用此函数的事件处理程序：
myButton.addEventListener('touchstart', preventZoom);
回答by Jan
CSS to disable double-tap zoom globally (on any element):
CSS 全局禁用双击缩放（在任何元素上）：
* {
touch-action: manipulation;
}
manipulation
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom.
操纵
启用平移和捏缩放手势，但禁用其他非标准手势，例如双击缩放。
Thanks Ross, my answer extends his: https://stackoverflow.com/a/53236027/9986657
谢谢罗斯，我的回答扩展了他的：https: //stackoverflow.com/a/53236027/9986657
回答by Jonathan Morales Vélez
You should set the css property touch-actionto noneas described in this other answer https://stackoverflow.com/a/42288386/1128216
您应该按照其他答案https://stackoverflow.com/a/42288386/1128216 中所述将 css 属性touch-action设置none为
.disable-doubletap-to-zoom {
touch-action: none;
}
回答by Er?in Dedeo?lu
* {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
Disable double tap to zoom on touch screens. Internet explorer included.
禁用双击以放大触摸屏。包括 Internet Explorer。
回答by S?lve Torn?e
回答by William Grasel
Simple prevent the default behavior of click, dblclickor touchendevents will disable the zoom functionality.
简单地阻止 的默认行为click，dblclick否则touchend事件将禁用缩放功能。
If you have already a callback on one of this events just call a event.preventDefault().
如果您已经对其中一个事件进行了回调，只需调用event.preventDefault().
