整理歸納一些之前記錄的h5兼容性問題以及相應的解決方法，大多都是移動端的，持續更新…
1、iOS滑動卡慢
- ios裏父元素設置overflow:auto或scroll時，子元素滾動時沒有滾動慣性，手指離開屏幕就立即停止滾動，所以會有一種卡和慢的感覺。
- 目前發現ios13及以上系統沒有這個問題，但低版本的還會出現，需要解決。
- 解決方法：
css裏給滾動父元素設置：
-webkit-overflow-scrolling: touch;
- 注意：這個css屬性有很多坑，謹慎使用，例如會導致絕對定位元素會被父元素的padding遮蓋等等。
2、多行文本溢出隱藏時文字被遮擋
- 常見於移動端，比如設置兩行文本溢出隱藏顯示省略號，個別機型會出現第二行文字下面部分顯示不全。
- 解決方法：
在添加溢出隱藏樣式的盒子外再套一層父盒子，給這個父盒子設置固定高度，使高度撐起來。
3、android端文字未垂直居中
- 使用height等於line-height或者通過設置上下padding是文字垂直居中的方法在android會有問題，文字偏上，個別機型比較明顯。
- 解決方法：
給文字所在的元素設置flex佈局，通過align-items: center屬性來控制垂直居中，基本能滿足需求。
4、移動端頁面跳轉時窗口高度變小
- 移動端輸入法彈窗彈起時，會導致頁面窗口高度變小，此時如果跳轉到了另一個html頁面，會出現另一個頁面剛打開時獲取到的窗口高度是縮小後的高度。
- 解決方法：
方法1：跳轉頁面之前，先通過document.activeElement.blur()隱藏輸入法鍵盤，然後延時300毫秒左右再跳轉頁面。
方法2：跳轉前先通過window.innerHeight獲取輸入法未彈起時的窗口高度，再通過地址傳參的方法傳遞該高度值。
5、ios的數字被識別爲電話號碼，有默認樣式
- 個別ios機型會自動把一些數字識別爲電話號碼，添加了默認樣式，比如網站備案號之類的，而且通過設置meta標籤也無法去除。
- 解決方法：
把被識別爲號碼的內容通過::before或after僞元素來設置。
6、ios底部margin-bottom失效
- css裏的margin不穩定，能不用就不用，能用padding代替就用padding，特別是margin-top和margin-bottom還有其他例如上邊距吸頂和下邊距重疊的問題。
- 解決方法：
設置一個空的div撐起margin-bottom設置的高度。
7、定位元素被輸入法頂起
- 輸入法彈起時，窗口高度縮小，導致定位在窗口底部的定位元素被頂起，可能會遮蓋內容元素。
- 解決方法：
input獲取焦點時，讓定位元素隱藏或改爲靜態定位，失去焦點時再恢復。
8、ios後臺運行時倒計時不準
- ios應用後臺運行時，js的定時器的執行頻率會降低直至暫停執行，恢復至前臺運行時就發現倒計時時間與預期不符。
- 解決方法：不通過執行循環次數來判斷倒計時時間，改用時間戳判斷。
9、安卓9.0不顯示圖片
- 安卓9.0開始，不支持https協議的網頁內使用http協議的圖片地址。
- 解決方法：
方法1：推薦，換用https的圖片地址。
方法2：安卓客戶端配置android:usesCleartextTraffic=“true”，出於安全考慮，不建議。
10、ie設置flex縱向佈局撐不開
- ie下設置display: flex; flex-direction: column;時，如果子元素設置flex: 1;無法撐開內容，會覆蓋頂部。這是因爲flex: 1;在ie下會被解析成flex: 1 1 0;而其他瀏覽器會解析爲flex: 1 1 auto;
- 解決方法：
不使用flex: 1;這種簡寫形式，改用flex: 1 1 auto;
11、audio標籤autoplay無法自動播放
- 由於瀏覽器的安全限制、防噪音等，音頻不允許自動播放。
- 解決方法：
瀏覽器的限制無法突破，只能通過人爲交互來觸發，比如點擊或滑動事件裏，獲取audio標籤元素，調用play()方法開始播放。
12、滾動到頂部無效
- 原生js的scrollTo方法在個別機型存在兼容性問題。
- 解決方法：
改用ele.scrollTop = 0 的方式，讓滾動父容器滾動到指定位置。
13、ios固定定位fixed層級不對
- ios裏定位的層級取決於父元素的層級，不管是absolute還是fixed，而安卓裏fixed層級是獨立計算的。
- 解決方法：
給父元素也加定位並設置較大的z-index值。
14、ios下父元素設置overflow: hidden子元素仍超出
- ios父元素設置了border-radius和overflow: hidden，子元素設置絕對定位，仍然會超出，導致邊框圓角無效果。
- 解決方法：
父元素設置transform: rotate(0deg);
15、ios元素盒子下邊框不顯示
- ios個別機型，元素設置的下邊框被遮擋或未顯示。
- 解決方法：
給盒子父元素添加高度撐起來。