Vue2.0 : 禁止页面的缩放

最新推荐文章于 2025-07-25 15:41:45 发布

原创最新推荐文章于 2025-07-25 15:41:45 发布 · 1.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #html5

收录于

前端专栏收录该内容

2 篇文章

订阅专栏

在Vue项目中禁止页面缩放可以提升用户体验，具体操作包括在`index.html`中设置`meta`标签，限制`viewport`的最大和最小缩放比例，以及在`App.vue`中监听并阻止多指触摸和手势缩放事件。这样可以确保页面在不同设备上保持一致的显示效果。

如果需要禁止页面的缩放,需要在vue项目中做如下更改:

第一步.

#index.html
<html lang="">
  <head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    ...
  </head>
...
</html>

第二步…

# App.vue
<script>
    window.onload = function() {
    document.addEventListener('touchstart', function(event) {
      if (event.touches.length > 1) {
        event.preventDefault()
      }
    });
    document.addEventListener('gesturestart', function(event) {
      event.preventDefault()
    })
  };
  ...
</script>