我想在浏览器中（在触摸设备上）停用 双击缩放功能 ，禁用所有缩放功能。
例如：可以多次点击一个元素以发生某些事情。这在桌面浏览器上运行良好（如预期的那样），但在触摸设备浏览器上，它会放大。
答案 0 :(得分：45)
<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上运行良好。 Haven未在Android或其他设备上进行测试（因为该网站仅在iPad上显示）。
答案 1 :(得分：36)
我知道这可能已经过时了，但我找到了一个适合我的解决方案。不需要疯狂的元标记和停止内容缩放。
我不是百分之百确定它是如何跨设备，但它确切地按照我想要的方式工作。
$('.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％跨浏览器和平台。上述代码应该作为大多数情况下的复制粘贴解决方案，除非您在点击事件之前需要自定义行为。
答案 2 :(得分：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）
答案 3 :(得分：21)
现代（截至2019年4月），仅CSS解决方案
将touch-action: manipulation添加到要禁用双击缩放的任何元素，例如以下disable-dbl-tap-zoom类：
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
来自touch-action文档（重点是我的）：
操作
启用平移和收缩缩放手势，但 禁用 其他非标准手势，例如 双击以缩放 。
此值可在Android和iOS上使用。
答案 4 :(得分：12)
如果您需要在没有jQuery的情况下工作的版本，我修改了Wouter Konecny's answer（也是通过this gist修改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);
答案 5 :(得分：8)
您应该将css属性// Set how old the jobs to list should be (in days)
def numDaysBack = 30
def cutOfDate = System.currentTimeMillis() - 1000L * 60 * 60 * 24 * numDaysBack
//Initiallize it to zero
def oldJobsNumber = 0
def size = hudson.model.Hudson.instance.getItems().size()
println "Total Number of Jobs on hudson :" + size
for (i=0;i<size;i++){
def allJob= hudson.model.Hudson.getInstance().getItems().get(i).getAllJobs()
def job =new ArrayList(allJob).get(0)
if (job != null && job .getLastBuild() != null && job.getLastBuild().getTimeInMillis() < cutOfDate) {
println job.getFullName()
oldJobsNumber++
}
}
println oldJobsNumber
设置为touch-action，如其他答案所述https://stackoverflow.com/a/42288386/1128216
none答案 6 :(得分：4)
CSS全局禁用双击缩放（在任何元素上）：
* {
touch-action: manipulation;
}
操作
启用平移和收缩缩放手势，但禁用其他非标准手势，例如双击以缩放。
感谢罗斯，我的回答扩展了他的观点：https://stackoverflow.com/a/53236027/9986657
答案 7 :(得分：4)
* {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
禁用双击以放大触摸屏。包括Internet Explorer。
答案 8 :(得分：1)
简单阻止click，dblclick或touchend事件的默认行为将禁用缩放功能。
如果您已经对其中一个事件进行过回调，请拨打event.preventDefault()。
答案 9 :(得分：0)
这样可以防止双击“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"
}
});
答案 10 :(得分：0)
如果有人像我一样使用 Vue.js 遇到此问题，
只需添加.prevent即可：@click.prevent="someAction"
答案 11 :(得分：0)
如果您只想防止在所有设备上双击缩放，请尝试将按钮的 dblclick 事件侦听器设置为 preventDefault()。这对我有用！
编辑：'dblclick' 中的拼写错误
const button = document.querySelector('#button');
button.addEventListener('dblclick', function(el) {
el.preventDefault();
});<button id="button"> No double click zoom here</button>答案 12 :(得分：-1)
我假设我有一个<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，Samsung）上的内置互联网应用程序，可以选择禁止<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">
答案 13 :(得分：-1)
使用CSS touch-events：none 完成所有触摸事件。如果有人也遇到这个问题就离开这里，花了我2个小时才找到这个解决方案而且它只有一行css。 https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
答案 14 :(得分：-2)
我们走了
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">