h5页面在ios中禁止用户缩放的meta标签无效的解决办法

一般情况下下面这段meta标签就可以禁止用户缩放了

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

但是测试的时候会发现 在ios10中无效 快速双击页面或者两指可以放大

一般的做法如下：

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

        var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
          var now = Date.now();
          if (now - lastTouchEnd <= 300) {
            event.preventDefault();
          }
          lastTouchEnd = now;
}, false);

但是你会发现在ios10中并没有起作用

我们来看看ios专属手势事件Gesture和通用事件touch的出发过程：
在同时监听了Gesture事件和Touch事件，则事件触发模式如下：
touchstart 第一个手指接触屏幕时触发
gesturestart 第二个手指接触屏幕时触发
touchstart 第二个手指接触屏幕时触发
gesturechange 两个手指都在屏幕上时，每次手指在屏幕上移动时触发
gestureend 第二个手指 离开屏幕时触发
touchend 第二个手指 离开屏幕时触发
touchend 第一个手指 离开屏幕时触发

所以我们要额外添加ios专属的“多指”触摸事件：gesturestart、gesturechange、gestureend来禁止默认事件

禁止ios10双指缩放

document.addEventListener('gesturestart', function(event) {
            event.preventDefault();
        });

到此问题解决