项目中禁用页面缩放

在移动端项目中禁用用户手指缩放

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

在网页中页面缩放包含三种方式

1. 快捷键缩放 Ctrl + + / Ctrl + - 进行网页缩放；
2. Ctrl + 鼠标滚轮进行网页缩放
3. 

// 键盘按键
document.addEventListener('keydown', function (event) {
 //  keyCode对照表自行对照百度 
    const keyCodes = [61, 107, 173, 109, 187, 189];  
    let isIncludes = keyCodes.includes(event.keyCode)
// DOM为此规定了4个属性，表示这些修改的状态：shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为true，否则为false。当某个鼠标事件发生时，通过检测这几个属性就可以确定用于是否按下了其中的键
     if ((event.ctrlKey === true || event.metaKey === true) && isIncludes) {
         event.preventDefault();
      }
    }, false);
// 鼠标滚轮
// https://www.cnblogs.com/ziyunfei/p/5545439.html  具体参照
document.addEventListener('mousewheel', e => {
       e = e || window.event;
       if ((e.wheelDelta && event.ctrlKey) || e.detail) {
           event.preventDefault();
       }
   }, {
       capture: false,
       passive: false
   });

bu

/**
* DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了，也就是说第三个参数现在可以是两种类型的值了
* 这个修订是为了扩展新的选项，从而自定义更多的行为，目前规范中 options 对象可用的属性有三个
* 很多移动端的页面都会监听 touchstart 等 touch 事件，像这样：
* document.addEventListener("touchstart", function(e){
    ... // 浏览器不知道这里会不会有 e.preventDefault()
})

由于 touchstart 事件对象的 cancelable 属性为 true，也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止，那它的默认行为是什么呢，通常来说就是滚动当前页面（还可能是缩放页面），如果它的默认行为被阻止了，页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。有 80% 的滚动事件监听器是不会阻止默认行为的，也就是说大部分情况下，浏览器是白等了。所以，passive 监听器诞生了，passive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了
*/

addEventListener(type, listener, {
    capture: false,  // capture 属性等价于以前的 useCapture 参数
    passive: false,
    once: false // once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉，还没有浏览器实现它；
})