While coding apps (especially mobile-focused), one thing that really annoys me is the "double click zoom" feature on some phones.
In the past, I used to have mixed feelings about how to disable that because if we do it via the meta viewport head tag, we disable the zoom for the entire website. But today, I learned that CSS has a property called touch-action.
As MDN states:
"The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser)."
As with most CSS properties, we have various values, but one does exactly what I want, and it's called manipulation.
"Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. [...]"
So, when I want to achieve that, I simply do:
* {
touch-action: manipulation;
}And the double-click zoom action goes away without losing the ability to pinch to zoom.