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);

禁用手指雙擊縮放：

var lastTouchEnd = 0;
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    })()