iOS10 Safari不识别viewport禁用缩放的暴力解决方案
移动设备升级到iOS10了，发现了自带的Safari浏览器不再识别meta viewport了。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple~~
网上看到了一段解决方案，测试了一下确实不错，就拿来了。
在iOS10之前都是通过
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
来强制不让手机浏览器缩放的，但是升级到iOS10后Safari不再识别这个meta标签。所以得用js来hack一下：
禁用双指缩放：
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
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);
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
当然，我测试，如果在iOS10的Safari中设置了viewport，其实双击放大也是不生效的，所以个人觉得在iOS10上比较好的解决方案是先设置viewport，然后再用js禁用双指缩放即可，无需再设置禁用双击缩放。
同时给出这个解决方案的作者还提出了一个有情提示，如果任何一个子元素的touch事件设置了stopPropagation阻止事件冒泡的话，可能还是会失效，而且在iOS10中你的输入框字体最好不要小于16px，否则iOS在输入框获得焦点时可能还是会强制放大。
当设置<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">后，
安卓是可以禁用缩放，而IOS不能禁用缩放，所以更加的方案是判断此时的设备是不是IOS苹果机型，如下代码 1 // 禁用IOS双指缩放, 安卓则不需要下面这个段代码
1 // 禁用IOS双指缩放和双击缩放, 安卓则不需要下面这个段代码 2 3 (function() { 4 var agent = navigator.userAgent.toLowerCase(); //检测是否是ios 5 6 if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){ 7 8 // 禁用双指缩放 9 document.documentElement.addEventListener('touchstart', function (event) { 10 if (event.touches.length > 1) { 11 event.preventDefault(); 12 } 13 }, false); 14 15 // 禁用双击缩放 16 var lastTouchEnd=0; 17 document.addEventListener('touchend',function (event) { 18 var now=(new Date()).getTime(); 19 if(now-lastTouchEnd<=300){ 20 event.preventDefault(); 21 } 22 lastTouchEnd=now; 23 },false) 24 } 25 })()
