防止手機瀏覽點擊輸入框自動放大

標籤：art   span   log   顯示   touch   view   new   start   eve   

1、設定meta屬性

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

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 禁止縮放。

2、蘋果為了提高Safari中網站的協助工具功能，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari瀏覽器也能支援手動縮放。所以只能用js加監聽事件來阻止手動縮放。

window.onload=function () {          document.addEventListener(‘touchstart‘,function (event) {              if(event.touches.length>1){                  event.preventDefault();              }          })          var lastTouchEnd=0;          document.addEventListener(‘touchend‘,function (event) {              var now=(new Date()).getTime();              if(now-lastTouchEnd<=300){                  event.preventDefault();              }              lastTouchEnd=now;          },false)      } 

 

防止手機瀏覽點擊輸入框自動放大