Javascript IOS HTML禁用双击以缩放

我正在设计一个主要关注数据输入的网站。在我的一个表单中，我有按钮可以快速增加和减少表单字段中的数值。我在用

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

禁用使用Firefox IOS应用程序显示的缩放功能。但是，当另一个用户使用Safari对其进行测试时，过快地单击按钮会导致页面放大，分散用户的注意力，并且无法快速增加值。似乎从IOS 10开始，苹果出于可访问性的原因删除了user scalable=no，这就是为什么它只适用于第三方浏览器，如Firefox。我发现最接近禁用双击缩放的是这个

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, false);

var lastTouchEnd=0；
document.addEventListener（'touchend'，函数（事件）{
var now=（new Date（））.getTime（）；
如果（现在-lastTouchEnd将此添加到标题中。这对我很有用

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


我最终通过使用以下代码解决了这个问题：参见格雷格的答案

CSS属性
touch action
适合我。在iOS 11.1上测试

button {
    touch-action: manipulation;
}

有关更多信息，请参见MDN:
我给出了一个有点复杂的答案，但它在停止双击和捏动缩放时非常有效和可靠，并允许几乎所有其他类型的交互

let drags=new Set（）//所有活动拖动的集合
文档。添加事件列表器（“触摸移动”，函数（事件）{
如果（！event.isTrusted）返回//不要对假触摸做出反应
数组.from（event.changedtouchs）.forEach（函数（touch）{
drags.add（touch.identifier）//将此触摸标记为拖动
})
})
文档.添加的EventListener（“touchend”，函数（事件）{
如果（！event.isTrusted）返回
设isDrag=false
数组.from（event.changedtouchs）.forEach（函数（touch）{
if（拖动has（触摸标识符））{
isDrag=true
}
drags.delete（touch.identifier）//touch结束，所以删除它
})
如果（！isDrag&&document.activeElement==document.body）{
//请注意，双击仅在主体处于活动状态时发生
event.preventDefault（）//不缩放
event.stopPropagation（）//不中继事件
event.target.focus（）//如果是输入元素
event.target.click（）//如果它有一个click处理程序
event.target.dispatchEvent（新的TouchEvent（“touchend”，事件））
//发送此事件的副本（用于其他触摸处理程序）
}
})

注：格雷格的答案并不一致（双击某些元素仍会放大）

如果您想防止收缩到缩放，您需要一些JS和CSS（不要问我为什么）：

document.addEventListener（'touchmove'，函数（事件）{
if（event.scale！==1）event.preventDefault（）；//如果是缩放手势，不要
})

及

*{touch action:pan-x pan-y}/*仅允许滚动手势*/
在我的问题中，我已经声明我正在使用此代码。但是，从IOS 10开始，出于可访问性原因，Safari不再应用user scalable=no。减去两个touchend事件之间的时间戳，如果值小于一个数字，例如100，取消事件，排除带有特定类的按钮，只需为事件的目标dom。这在10.2.1中也适用。将其放在“body”上几乎会禁用它。这在禁用缩放的
视口
meta旁边为我做了。这只适用于块级元素/具有已知高度和宽度的元素。内联元素仍将具有默认的浏览器触摸行为。谢谢！这似乎很有用比我之前提出的解决方案好得多。在iOS 14.4中工作
button {
    touch-action: manipulation;
}