187 字
1 分钟
浏览器禁止双指或点击放大
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
但 iOS 10 开始,meta 设置在 Safari 内无效了,在 iOS 的其他浏览器上也会相应出现无法禁止缩放的情况出现。
//阻止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 <= 500) {
//改为500试试
//当两次手指弹起的时间小于300毫秒,认为双击屏幕行为
event.preventDefault();
} else {
// 否则重新手指弹起的时间
lastTouchEnd = now;
}
},
false
);
//阻止双指放大页面
document.documentElement.addEventListener("gesturestart", function (event) {
event.preventDefault();
});