完美解決ios10及以上Safari沒法禁止縮放的問題

移動端web縮放有兩種：

1.雙擊縮放；

2.雙指手勢縮放。

在iOS 10之前，iOS和Android均可以經過一行meta標籤來禁止頁面縮放

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

但iOS 10開始，meta設置在Safari內無效了。

後來在網上看到一個解決方案：

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)
}
複製代碼

通過測試，這種方法只能禁止雙擊縮放。

只好繼續找解決方案了。

原來在iOS裏有一組雙指手勢操做的事件：gesturestart、gesturechange、gestureend

在上面的js方法里加入下面的事件監聽：

document.addEventListener('gesturestart', function (event) {
      event.preventDefault();
    });
        
複製代碼

既不能雙擊縮放，也不能雙指縮放。

完整代碼：

<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>
複製代碼

這樣就OK了，安排！