IOS HTML禁用双击以缩放 [英] IOS HTML disable double tap to zoom

问题描述

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

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">

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

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

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

//stackoverflow.com/a/38573198
但是，这会禁用快速点击，虽然这会阻止双击缩放，但也会阻止用户快速输入值。有没有办法允许快速按下按钮，同时还禁用双击缩放？

from https://stackoverflow.com/a/38573198 However, 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?

推荐答案

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

The CSS property touch-action works for me. Tested on iOS 11.1.

button {
    touch-action: manipulation;
}

有关详细信息，请参阅MDN： https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

这篇关于IOS HTML禁用双击以缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！