移动端页面禁止用户缩放

2018-12-07  本文已影响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);

上一篇 下一篇

猜你喜欢

热点阅读