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