Disable zoom, or disable "double-tap to zoom".
Browsers support zooming through touch gesture, and Safari support "double-tap to zoom". These default features may be handy for content Websites, however, for Web apps with rich user interactions, such features may cause problems.
For example, when navigating a table with pagination and navigation buttons, John the user may tab the Forward button rather frequently and such action could be interpreted by the OS as double, and here come the undesired zooming.
Recently I have developed "Ishihara Color Blind Test" app. For the designed functionality, zoom makes not sense at all.
In the global css/scss, on interactive elements:
html, body {
touch-action: manipulation;
}
button, a, .clickable, [role="button"] {
touch-action: manipulation;
}
In the Webpage like index.html:
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no">
maximum-scale=1, user-scalable=no is the key change.
References:
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. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scale or the behavior is undefined. Browser settings can ignore this rule, and iOS10+ ignores it by default. It can be a number between 0.0 and 10.0.A boolean indicating if the user can zoom the web page. Browser settings can ignore this rule, and iOS10+ ignores it by default. It can be either yes or no, defaulting to yes.Therefore, both zoom gesture and double-tap to zoom are disabled. However, on PC, mouse-wheel zooming is still working well, and this has nothing to do with the touch screen user experience.
If you would avoid accidental zooming and allow pinch gesture zoom, simply not to declare maximum-scale=1, user-scalable=no.
Remarks: