VUE页面如何禁止缩放

VUE页面如何禁止缩放

• 如何禁止缩放
  • meta标签
  • 事件监听

meta标签

在需要禁用缩放的html中，在head标签中加入下面的meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
其中 maximum-scale为允许用户的最大缩放值，
user-scalable为是否允许用户进行缩放，(yes)允许(默认)，no(0)不允许，两者结合使用可以阻止页面被放大。

事件监听

• 鼠标滚轮事件
  • mousewheel
  • DOMMouseScroll
• 手指触摸事件
  • touch
    • touchstart
    • touchend

除了在html中需要配置上面的meta标签之外还需要监听鼠标滚轮事件或者手指触摸事件

mousewheel

在<script>标签中加入鼠标滚轮事件，监听到之后取消其的默认行为

    document.addEventListener('mousewheel', function