ios safire浏览器双指点击或者缩放禁用

最新推荐文章于 2024-10-10 09:55:29 发布

转载最新推荐文章于 2024-10-10 09:55:29 发布 · 1k 阅读

前端同时被 3 个专栏收录

23 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了一种在Safari浏览器中禁用页面缩放的方法，通过监听touchstart、touchend和gesturestart事件并阻止默认行为，有效防止了双指缩放及iOS设备上的双击缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://blog.csdn.net/qq_31150171/article/details/89023576

mounted () {
  /* 对于Safari浏览器来说，无法通过meta属性限制其缩放，可以在App.vue中添加如下代码，实现缩放禁止，主要原理是：禁止两指以上的触摸事件（因为缩放需要两指操作），禁止手势事件的识别 */
  window.onload = function () {
    // 禁止双指缩放
    document.addEventListener('touchstart', function (event) {
      if (event.touches.length > 1) {
        event.preventDefault()
      }
    });
    // 禁止ios 双击缩放
    let lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
      let now = (new Date()).getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    }, false);
    document.addEventListener('gesturestart', function (event) {
      event.preventDefault()
    });
  }
}