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

最新推荐文章于 2025-02-11 15:04:49 发布

打怪兽的凹凸曼

最新推荐文章于 2025-02-11 15:04:49 发布

阅读量3.8k

点赞数 3

文章标签： js jquery 小程序 dom html5

本文链接：https://blog.youkuaiyun.com/qq_38179746/article/details/109763290

版权

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