禁止移动端网页缩放

一、meta设置

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

content属性值 :

     width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放  maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。 user-scalable:是否可对页面进行缩放，no 禁止缩放

二、js设置

iOS 10之后不接受meta标签，可通过js监听手势控制， 除了ios，安卓系统设置了meta也会失效，需要添加js控制代码

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

关于addEventListener第三个参数

{
	capture: Boolean, // 如果是`true`，表示`listener`会在该类型的事件捕获阶段传播到该`EventTarget`时触发
	once: Boolean, // 如果是`true`，表示`listener`在添加之后最多只调用一次。`listener`会在其被调用之后自动移除
	passive: Boolean, // 默认为true。如果为true，表示`listener`永远不会调用`preventDefault()`。如果`listener`仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告
}