在触摸设备上的浏览器中禁用双击“缩放”选项
我想禁用浏览器中的指定元素 （触摸设备上）的双击缩放function， 而不禁用所有的缩放function 。
例如：一个元素可以多次点击以发生某些事情。 这在桌面浏览器上正常工作（按预期），但在触摸设备浏览器，它会放大。
<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或其他设备上进行testing（因为该网站只会在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);
我没有写这个，我只是修改它。 我在这里find了iOS版本： https ：//gist.github.com/2047491（谢谢Kablam）
我知道这可能是旧的，但我find了一个完美的解决scheme。 不需要疯狂的元标签和停止内容缩放。
我不是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. })
这将简单地禁用正常的敲击function，然后再次调用标准的点击事件。 这样可以防止移动设备缩放，但其他function正常。
编辑：这现在已经过时间testing和运行在几个现场应用程序。 似乎是100％跨浏览器和平台。 上面的代码应该作为大多数情况下的复制粘贴解决scheme，除非您希望在点击事件之前进行自定义行为。
如果你需要一个没有jQuery的版本，我修改了Wouter Konecny的答案 （也是通过JohanSundström修改这个要点创build的）来使用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(); }
简单地防止click ， touchend或touchend事件的默认行为将禁用缩放function。
如果你已经对这个事件有一个callback，只需调用event.preventDefault() 。
这将防止“身体”元素的双击缩放，这可以改变到任何其他select器
$('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" } });
我假设我有一个带有文本，滑块和button的<div>input容器区域，并且要禁止在<div>偶然的双击。 以下操作不禁止缩放input区域，也不涉及在我的<div>区域外双击和缩放。 有不同的浏览器应用程序的变化。
我只是试了一下
（1）对于iOS上的Safari和Android上的Chrome，并且是首选方法。 除了在三星的互联网应用程序，它禁用双击不完整的<div> ，但至less在处理水龙头的元素。 它返回return false ，除了text和rangeinput。
$('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）上的内置互联网应用程序，可以select禁止<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">
开始了
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
