移動端相容性問題

yanyongchao發表於2019-02-16

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" />
複製程式碼

相關文章