美文网首页
移动端页面禁止用户缩放

移动端页面禁止用户缩放

作者: 菜鸟搬砖 | 来源:发表于2018-12-07 14:39 被阅读10次

    在IOS上即使设置了:

    <meta name="viewport" content="width=device-width,initial-scale=1.0;user-scalable=no">

    但依然可以缩放,这个操作是IOS系统允许的。

    同时,当select选择框、input输入框在首次获取焦点时,也可能会页面被放大。

    在查到的资料中也有说是因为你的字体太小所导致,设置select、input字体为16px的。

    在网上搜了好多文章,最终得到结果:

    document.addEventListener('gesturestart', function (e) {

            e.preventDefault();

     });

    document.addEventListener('dblclick', function (e) {

            e.preventDefault();

    });

    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);

    相关文章

      网友评论

          本文标题:移动端页面禁止用户缩放

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