原创

safari浏览器中禁止网页双击缩放功能

safari总是那么与众不同,所以除了

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

这行代码外,我们还需要加上这个

//阻止safari浏览器双击放大功能==========================================↓
let lastTouchEnd = 0  //更新手指弹起的时间
document.documentElement.addEventListener("touchstart", function (event) {
    //多根手指同时按下屏幕,禁止默认行为
    if (event.touches.length > 1) {
        event.preventDefault();
    }
});
document.documentElement.addEventListener("touchend", function (event) {
    let now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
        //当两次手指弹起的时间小于300毫秒,认为双击屏幕行为
        event.preventDefault();
    }else{ // 否则重新手指弹起的时间
        lastTouchEnd = now;
    }
}, false);
//阻止双指放大页面
document.documentElement.addEventListener("gesturestart", function (event) {
    event.preventDefault();
});
//阻止safari浏览器双击放大功能完结=======================================↑

就行了!

正文到此结束