美文网首页前端开发那些事每日一记让前端飞
#每日一记#iOS Safari 中无法通过 <meta&

#每日一记#iOS Safari 中无法通过 <meta&

作者: 罗小黑写写文字 | 来源:发表于2018-04-19 16:35 被阅读29次
    每日一记 - 但并不日更

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

    相关文章

      网友评论

        本文标题:#每日一记#iOS Safari 中无法通过 <meta&

        本文链接:https://www.haomeiwen.com/subject/bibwkftx.html