javascript IOS HTML 禁用双击缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46167604/
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
IOS HTML disable double tap to zoom
提问by tchatow
I am designing a website primarily focused on data entry. In one of my forms I have buttons to increment and decrement the number value in a form field quickly. I was using
我正在设计一个主要专注于数据输入的网站。在我的一个表单中，我有按钮可以快速增加和减少表单字段中的数值。我正在使用
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
to disable the zoom which appeared to work using the Firefox app for IOS. However, when another user tested it with Safari, clicking on the button too fast resulted in zooming in on the page, distracting the user and making it impossible to increase the value quickly. It appears that as of IOS 10, apple removed user-scalable=no for accessibility reasons, so that's why it only works in 3rd party browsers like Firefox. The closest I found to disabling double tap zoom was this
禁用似乎使用适用于 IOS 的 Firefox 应用程序工作的缩放。然而，当另一个用户用 Safari 对其进行测试时，点击按钮太快导致页面放大，分散用户注意力，无法快速增加值。似乎从 IOS 10 开始，出于可访问性的原因，苹果删除了 user-scalable=no，这就是为什么它只适用于 Firefox 等 3rd 方浏览器的原因。我发现最接近禁用双击缩放的是这个
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
from https://stackoverflow.com/a/38573198However, this disables quickly tapping altogether, which although prevents double tap zooming, also prevents the user from entering values quickly. Is there any way to allow a button to be pressed quickly, while also disabling double tap zooming?
来自https://stackoverflow.com/a/38573198但是，这会完全禁用快速点击，虽然可以防止双击缩放，但也会阻止用户快速输入值。有什么方法可以让按钮快速按下，同时禁用双击缩放？
回答by Greg Smith
The CSS property touch-actionworks for me. Tested on iOS 11.1.
CSS 属性touch-action对我有用。在 iOS 11.1 上测试。
button {
touch-action: manipulation;
}
See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
有关更多信息，请参阅 MDN：https: //developer.mozilla.org/en-US/docs/Web/CSS/touch-action
回答by tchatow
I ended up solving this problem by using the following code:See Greg's answer above
我最终通过使用以下代码解决了这个问题：见上面格雷格的回答
$(document).click(function(event) {
element = document.elementFromPoint(event.clientX, event.clientY);
if(document.getElementById("div_excluded_from_doubletap").contains(element)) {
event.preventDefault();
clickFunction(element);
}
});
回答by Nimra Waseem
Add this to your header. This works for me.
将此添加到您的标题中。这对我有用。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
