Saturday, June 1, 2024
 Popular · Latest · Hot · Upcoming
70
rated 0 times [  76] [ 6]  / answers: 1 / hits: 33056  / 7 Years ago, tue, september 12, 2017, 12:00:00

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?


More From » html

 Answers
9

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


[#56509] Friday, September 8, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
makaylahk

Total Points: 166
Total Questions: 94
Total Answers: 117

Location: Gabon
Member since Sat, Jul 25, 2020
4 Years ago
;