There are two types of mobile Web scaling:

1. Double-click zoom.

2. Pinch with two fingers.

Before iOS 10, both iOS and Android could disable page zooming with a single meta tag

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0; name="viewport" />

However, starting with iOS 10, the meta Settings are no longer valid in Safari.

Then I saw a solution on the Internet:

window.onload=function () {
    document.addEventListener('touchstart'.function (event) {
        if(event.touches.length>1){
            event.preventDefault();
        }
    })
    var lastTouchEnd=0;
    document.addEventListener('touchend'.function (event) {
        var now=(new Date()).getTime();
        if(now-lastTouchEnd<=300){
            event.preventDefault();
        }
        lastTouchEnd=now;
    },false)}Copy the code

When tested, this method only disallows double – click zooming.

Just keep looking for a solution.

There is a set of two finger gestures in iOS: gesturestart, gesturechange, and gestureend

Add the following event listener to the js method above:


    document.addEventListener('gesturestart'.function (event) {
      event.preventDefault();
    });
        
Copy the code

You can’t double – click zoom or double – finger zoom.

Complete code:

    <script>
      window.onload=function () {
        document.addEventListener('touchstart'.function (event) {
          if(event.touches.length>1){ event.preventDefault(); }}); var lastTouchEnd=0; document.addEventListener('touchend'.function (event) {
          var now=(new Date()).getTime();
          if(now-lastTouchEnd<=300){
            event.preventDefault();
          }
          lastTouchEnd=now;
        },false);
        document.addEventListener('gesturestart'.function (event) {
          event.preventDefault();
        });
      }
    </script>
Copy the code

That’s it! Schedule it!