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

wuliDream發表於2018-03-16

系統自帶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
}]

關於Andriod

安卓不能快取https裡的webview(只能是http

第三方平臺上的問題

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

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



相關文章