Vue项目移动端禁止页面放大缩小

最新推荐文章于 2024-03-22 11:28:43 发布

原创最新推荐文章于 2024-03-22 11:28:43 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios

本文介绍如何在Vue项目中禁止移动端浏览器页面的放大缩小操作。针对iOS设备不兼容的问题，提供了通过监听touchstart和gesturestart事件并阻止默认行为的解决方案。

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

Vue项目移动端禁止页面放大缩小

在安卓上可以实现禁止放大缩小，但是ios就不行

// index.html 中添加 meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">

后来查询才知道对于IOS10以上的苹果机子，上述方法是行不通的，可以尝试以下的方法

//在 src / app.vue 中 script 标签内添加代码
<script>
window.onload = function() {
    document.addEventListener('touchstart', function(e) {
      console.log("1",e.touches.length)
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    })
    document.addEventListener('gesturestart', function(e) {
      console.log("2")
      e.preventDefault()
    })
  }
</script>