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 (event) {
        event = event || window.event;
        if ((event.wheelDelta && event.ctrlKey)) {
            event.preventDefault();
        }
    }, {
        capture: false,
        passive: false
    });

“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果大于0说明滚轮是向上滚动，如果是小于0说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。

mousewheel说明：大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但某些浏览器可能不支持此事件，或许可以试试”DOMMouseScroll” 。

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

    document.addEventListener('DOMMouseScroll', function (event) {
        event = event || window.event;
        // event.detail 属性和 mousewheel 事件的 wheelDelta 属性是一个意思
        if ((event.detail && event.ctrlKey)) {
            event.preventDefault();
        }
    }, {
        capture: false,
        passive: false
    });

“DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果小于0说明滚轮是向上滚动（与 mousewheel 的 “event.wheelDelta” 正好相反），如果大于0说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。

若需禁用通过手指触摸缩放页面时需要touch(触摸)事件

1. touchstart 触摸开始，手指点击屏幕时触发（可监听多点触控）
2. touchmove 接触点改变，滑动时持续触发

在<script>标签中加入手指触摸事件，监听到之后取消其的默认行为

    document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
            event.preventDefault()
        }
    },{
        capture: false,
        passive: false
    });

    document.addEventListener('touchmove', function(event) {
        event.preventDefault()
    },{
        capture: false,
        passive: false
    });