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

網際網路學徒發表於2018-07-12

移動端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)
}
複製程式碼

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

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

只好繼續找解決方案了。

原來在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了,安排!

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

相關文章