h5页面在移动端禁止缩放,双击放大,双指放大

h5的页面在手机浏览器,或者微信里面访问时,有时候不小心点了,页面就变大了

 

 就像这样

需要在js里面添加方法

将如下代码拷贝就OK了

// 禁用缩放
function addMeta() {
    $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
}
setTimeout(addMeta, 3000);

// 禁用双指放大
document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, {
    passive: false
});

// 禁用双击放大
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, {
    passive: false
});

 

posted @ 2020-11-17 18:19  凹凸曼啦  阅读(3785)  评论(0编辑  收藏  举报