Prohibit zooming in and out of Double Tap in Safari
In many cases, in order to ensure that the layout will not be caused by the user zooming out or zooming in, the user-scalable = no will be used to ensure that the user cannot zoom out or zoom in the screen, but this method may not be able to browse at all Supported on the device.
Usually Chrome is used as the main development browser, so I have not noticed this problem until the user reported that when using Safari to browse, you can zoom in or zoom out the screen when you double-click on the screen. This only noticed that Safari has ignored user-scalable = no this attribute.
In the above example, you can add touch-action: manipulation; in the CSS, so that the element can only use sliding or two-finger zoom, and prohibit all non-standard gestures, such as double-click zoom, while also avoiding browsers 300ms delay for click event.
But this can only solve part of it. When the button is added with the disabled attribute, and the button is also in the disabled state, double-clicking the disabled button will still trigger the enlargement or reduction of the screen, but this part has not found a better Solution.
Since you can’t solve the problem, you have to solve the problem!
The code looks like this:
There should be a better solution. If so, please let me know.
In addition to documenting how to resolve this situation, this article also wants to discuss the significance of the user-scalable = no attribute being ignored.
It is mentioned in the Safari content:
To put it simply, in order to improve the usability of users, the user-scalable = no attribute is automatically ignored on Safari.
For users, this should be considered a good thing. User-scalable = no has no way to restrict users from zooming in or zooming out the screen. Users can adjust the content to a suitable size to browse content. Especially on websites that do not do RWD, or for the overall design, the font is set to a font size that is not suitable for reading. These websites are very painful experiences for users when browsing.
Therefore, fixing the zoom ratio is worth discussing in itself, because everyone feels comfortable with different font sizes, so users must adjust their own font size to be able to browse the website for a long time.