#每日一记#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许可证） 转载时请保留原文连接 以保证可及时获取对文章的订正和修改