手机端 meta 标签禁止页面缩放功能失效的解决方法

移动设备升级到iOS10了，发现了自带的Safari浏览器不再识别meta viewport了。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple。其实在华为手机上也有同样的问题 之前都是通过下面代码来禁止页面缩放：

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

官方的解释是：本打算用 meta 合适的设置来增强用户体验的，结果大部分情况下都被直接设置成禁止缩放，造成低分辨率设备上很难看清文字，所以不再对这样的设置生效。

在Android的自带浏览器中(例如华为，魅族，小米)第一次手动缩放时，会提示--再次操作可强制缩放网页---；再次缩放也可以缩放；

这一现象意味着meta标签的失效。在Android的chrome中还是不可以用户缩放，说不定那天也就不支持了。

不过有些专为手机端设计的单页面应用，在禁止用户缩放后能带来更好的用户体验。那么要怎么设置禁止用户缩放呢。下面是我从网上找到再阶段可用的方法。

window.onload = function () {
    document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, {
        passive: false  // 关闭被动监听
    });
    var lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
};