Ros*_*len 52
添加touch-action: manipulation到要禁用双击缩放的任何元素,如下面的disable-dbl-tap-zoom类:
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
从touch-action文档(强调我的):
操作
启用平移和捏合缩放手势,但禁用其他非标准手势,例如双击缩放.
我在这个页面上尝试了其他答案,但这是最简单,最可靠的解决方案.此值适用于Android和iOS.
Kab*_*lam 49
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
etc...
</head>
我最近才使用它,它在iPad上运行良好.尚未在Android或其他设备上进行测试(因为该网站仅在iPad上显示).
Roc*_*160 38
我知道这可能已经过时了,但我找到了一个对我来说完美的解决方案.不需要疯狂的元标记和停止内容缩放.
我不是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事件之前需要自定义行为,否则上述代码应作为大多数情况下的复制粘贴解决方案.
Wou*_*cny 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)
Evr*_*mbe 13
如果你需要一个没有jQuery的版本,我修改了Wouter Konecny的答案(也是由JohanSundströ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);
Jon*_*lez 10
您应的CSS属性设置touch-action,以none在该对方的回答中描述/sf/answers/2960187051/
.disable-doubletap-to-zoom {
touch-action: none;
}
* {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
禁用双击以放大触摸屏。包括 Internet Explorer。
CSS全局禁用双击缩放（在任何元素上）：
* {
touch-action: manipulation;
}
操纵
启用平移和收缩缩放手势，但禁用其他非标准手势，例如双击以缩放。
谢谢罗斯，我的回答扩展了他的观点：https : //stackoverflow.com/a/53236027/9986657
小智 8
在移动设备上禁用双击缩放（2023 IOS Safari 解决方案）：
我发现使用元标记方法对于移动 safari 浏览器来说并不是一个可行的解决方案。这是对我有用的解决方案。
工作解决方案：
.selector {
touch-action: manipulation;
}
通过简单地添加操作的触摸动作，应用以下规则的所有按钮将不会在连续单击按钮时缩放。
示例网站：计算器应用程序
小智 5
不幸的是，上面的大部分编码都不起作用，这些简单的代码就可以做到
document.addEventListener('dblclick', function(event) {
event.preventDefault();
}, { passive: false });