移動端web縮放有兩種：

1.雙擊縮放；

2.雙指手勢縮放。

在iOS 10以前，iOS和Android都可以通過一行meta標簽來禁止頁面縮放

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

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

window.οnlοad=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();

});

復制代碼

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

完整代碼：

window.οnlοad=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();

});

}

復制代碼

這樣就OK了，安排！

總結

以上是生活随笔為你收集整理的html 禁止缩放 ios10,完美解决ios10及以上Safari无法禁止缩放的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。