#每日一记#iOS Safari 无法通过<meta>禁止缩放的问题

发现在 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许可证） 转载时请保留原文链接 以保证可及时获取对文章的订正和修改