Vue项目中,如何禁止页面的缩放

74 阅读 0 评论 49 点赞

我是靠谱客的博主娇气火龙果，这篇文章主要介绍Vue项目中,如何禁止页面的缩放，现在分享给大家，希望可以做个参考。

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

注：只设置meta，ios无效。

#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()
    })
    // 禁用双击放大
    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, {
        passive: false
    });
  };
</script>