系統自帶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時機處理。