移動端兼容性問題

1. overflow: auto; IOS手機滾動卡頓

-webkit-overflow-scrolling: touch; //有回彈效果 
複製代碼

2. 動畫定義3D啓用硬件加速

3. 盒子邊框最低只能是1px

4. a標籤或者button標籤等，點擊後會有藍色邊框；去掉難看的點擊的高亮效果

* {
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
複製代碼

5. calc的兼容性處理

CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。
Android瀏覽器目前仍然不支持calc，因此移動端不建議使用calc
複製代碼

6. 微信瀏覽器中跳轉新網頁：window.locaition.href 無效；

var nextPage = document.createElement("a");
     nextPage.setAttribute('href','http://www.baidu.com');
     nextPage.click();
複製代碼

7. 移動端點擊300ms延遲

8. 移動端 HTML5 audio autoplay 失效問題

這個不是 BUG，因爲自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者沒必要要的流量消耗，因此蘋果系統和安卓系統一般都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才能夠播放。

9. 禁止ios和android用戶選中文字；禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

div {
  -webkit-user-select:none；
  -webkit-touch-callout: none
}
複製代碼

10. ios下取消input在輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />
複製代碼