How to return the zoom when pinch to zoom to 100% in iOS

user_12223830 0
Viewed 188

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>

mobile css javascript ios
1 Answers

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);
user_120073470
Related