IOS HTML disable double tap to zoom

Question

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

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/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?

Answer 1

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

button {
    touch-action: manipulation;
}

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

Answer 2

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);
    }
});

Answer 3

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