How to prevent a user in iOS from zooming a site with two fingers?
I put this attribute
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
it only works with double click, and when zooming with two fingers it does not work, how to solve this or ios will let you zoom in anyway?
Use the touch-action property.
To disable pinch/zoom gestures and double tap to zoom gestures:
body {
touch-action: pan-x pan-y;
}
If you don't need panning gestures either, just do:
body {
touch-action: none;
}
Adding the information above to the viewport meta tag did not work for me either. I added
body {
touch-action: pan-x pan-y;
}
and everything works perfectly on Android. However, we're using ant design and for some reason, there's a class called ant-scrolling-effect being added to the body that adds
body {
touch-action: none;
}
but it still lets you zoom on iOS. I have not figured out why this works perfectly on Android, but does not work on iOS.