jiangwei小站
187 字
1 分钟
浏览器禁止双指或点击放大
2024-04-30
<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();
});