#兩年移動端踩坑，遇到的那些不得不說的bug及修復

時間 2019-11-17

標籤兩年 2年移動遇到那些不得不說 bug 修復欄目無線简体版

原文原文鏈接

系統自帶webview裏的注意點

1.IOS端:active不生效

常見效果長按按鈕狀態發生變化,好比切換src等，用:active再方便不過，但是但是。。。

解決方案：body標籤裏綁定個<body ontouchstart=""></body>,可寫js綁定

2.IOS端:div,span,p...綁定click無效

在綁定事件的元素加 cursor: pointer;

3.IOS端：點擊會有黑色陰影，很醜

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

4.IOS端，安卓部分低版本系統，X5內核不支持彈性佈局的flex-wrap:no-wrap

若是用戶量很大，建議仍是換一種佈局方式

5.webview裏在body,html加overflow-x,overflow-y等屬性，會致使原生滾動條很卡頓，並且還會致使原生客戶端監聽不到滾動長度

找到對應元素，設置overflow-x,overflow-y或者在body,html加 -webkit-overflow-scrolling: touch; 會使滾動條順滑

6.line-height==height 在安卓上顯示偏上問題，不垂直居中

選擇加padding替代line-height

7.在ios中post請求，會緩存，雖然在ajax中設置不緩存

手動在請求url後加個隨機數params

8.部分較新的es5工具函數，各大webview支持性各異，好比ios不支持sort...

9.魅族系統定時器播放序列動畫，設置時間無效（總感受是有定時器的最小時間，我在動畫裏設置的是66.7ms，不算很快，可是顯示卡頓，手動設置30ms，播放動畫仍是以前那樣，沒效果）rrequestanimationframe又不支持，藍瘦

10.小米系統6.0版本使用iscroll，內部內容不能滾動，最後只能使用overflow:auto

如下部分針對安卓4.3系統如下webview兼容性

1.對css兼容性不好，好比calc，display:flex...

2.對於一些經常使用的好比在一個div裏設置個背景圖片，div裏沒東西，設置寬高，可是安卓低版本無效。顯示不出該元素，可是絕對定位了該元素，卻顯示出正確的寬高的元素

3.對於一個元素相對定位同時又margin:0 auto ,該元素不會居中...不設置相對定位，居中

還有不少，若是產品依然讓兼容4.3如下系統，準備好接各類鍋吧...

正好想到的雜碎東西

1.關於js精度問題

需求（出如今小程序中）：後端生成17位數字的id，傳到瀏覽器端後，通過ajax庫處理，id會隨機-1，在原數字上，緣由：js超過16位的整數會出現精度問題，因此最終後端處理

2.異步獲取數據，給後端傳的數據是數組的狀況下。需特殊處理（前提後端解析是以表單形式的'Content-Type': 'application/x-www-form-urlencoded'）

jq ajax中設置transition:true

axios中，在配置中設置

transformRequest: [function (data) {

// Do whatever you want to transform the data

let ret = ''

for (let i in data) {

if(typeof data[i] == 'object'){

let listData = data[i]

for(let k = 0; k < listData.length; k++ ){

ret += encodeURIComponent(i) + '=' + encodeURIComponent(listData[k]) + '&'

}

}else{

ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'

}

ret = ret.substring(0,ret.length-1)

return ret

}]

關於Andriodcss

安卓不能緩存https裏的webview（只能是http ）

第三方平臺上的問題html

微博上禁止ios系統跳轉到appStore,只能友情提示或者提示用戶在safari瀏覽器打開網頁ios

ios系統10.2-10.3幾個版本，audio標籤動態加載src，資源不能播放的問題，網上有反饋，最重要上load時機處理。web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。