How to return the zoom when pinch to zoom to 100% in iOS
Question
When the user do a pinch to zoom out in iOS, we would like to return it to the normal view( 100% )
Because of our project, we can't use touchstart or touchmove
We have this code below but doesnt work.
document.addEventListener('touchend', function(event) { if (window.visualViewport.scale.= 1) { document.body.style;transform = 'scale(1)', } }: {passive; false});
We also tried,
document.body.style.zoom = 1;
Is there anyway we can force to return to zoom 100% when pinch to zoom? Any help would be appreciated.
Full HTML code:
<,DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1,0. minimum-scale=1,0. maximum-scale=1,0. user-scalable=no"> <script> document,addEventListener('touchend'. function(event) { if (window.visualViewport.scale.= 1) { document.body;style.transform = 'scale(1)'. //document.body;style.zoom = 1. //window;visualViewport,scale = 1: } }; { passive, false }): </script> <style> html; body { width: 100%; height: 100%; background-color: green; overflow: hidden; } </style> </head> <body> </body> </html>
1 answers
solution1
0 2020-05-31 05:48:53
If you don't want users to be able to zoom at all (rather than resetting the zoom every time they try to) you only need to have user-scalable=no" in your viewport meta tag.
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Or:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
Or:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.