#每日一記#iOS Safari 沒法經過 禁止縮放的問題

發如今 iphone 手機中即便設置了 <meta> 也沒法禁止縮放的問題。

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

Webkit 官方解釋

若是你懶得看上面的文章，那麼大意是這些屬性原本是經過合適的設置來加強用戶體驗的，結果大部分狀況下都被直接設置成禁止縮放，形成低分辨率設備上很難看清文字。因此 Webkit 在 iOS 10 後再也不對這樣的設置生效。

不過有些專爲手機端設計的單頁面應用，在禁止用戶縮放後能帶來更好的用戶體驗，那麼在 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);
};
複製代碼

上面這個例子在經過檢測觸摸的手指數量，若是大於2個指頭則禁止默認事件觸發。若是300毫秒內快速點擊也禁止默認事件觸發。

不過雙指縮放沒法正常工做。

在 chrome 中發現這邊 touchstart 事件被自動添加了 passive:true，這個屬性是幹什麼的呢，一句話解釋起來就是事件回調函數中的 event.preventDefault() 都不生效。

// 改進後的事件監聽
window.onload = function () {
    document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, {
        passive: false  // 關閉被動監聽
    });
    var lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
};
複製代碼

羅小黑寫寫文字

若是喜歡文章 請留下一個贊~ 若是喜歡文章 分享給更多人~

在掘金中關注我 在簡書中關注我

自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證） 轉載時請保留原文連接 以保證可及時獲取對文章的訂正和修改