移動端的那些坑
https://mp.weixin.qq.com/s/pVGFcVWmn5o-tD6hrdksUQ (原網址)
Safari下使用border-image，不能設定border-color: transparent。
使用<meta name="format-detection" content="telephone=no" />解決連續數字誤識別為電話號碼導致樣式出錯的問題。
Safari的iframe會自動去適應內容大小而無視CSS中設定的width，該特性只能通過scrolling="no"屬性關閉，並通過設定如下CSS樣式設定width：width: 1px; min-width: 100%;
scrolling="no"會導致安卓下iframe無法滑動，目前只能通過UA裝置判斷解決。
Safari 10以下的flex佈局不認width和flex-basis，但是會認min-width，詳見Can I Use 中 flex 的 Known issue第一條。
在 Safari 中，setTimeout 無法觸發 focus 事件，且不支援 autofocus 屬性。可以使用Promise.resolve().then()來執行需要非同步的 focus 程式碼。
iOS 10 safari 會無視meta user-scalable=no，需要用e.preventDefault
Safari下開無痕瀏覽模式，操作localStorage會直接報錯，需要try catch。
某同學用unescape解析encodeURIComponent編碼的資訊，掉進了亂碼的坑。
type=search有坑。
position:fixed有坑。
部分版本的padStart/padEnd實現有bug，會出現null
http://www.joycesong.com/arch…
ios版本：11.1-11.3
使用swiper或者transform屬性時，有一定概率出現transform的元素以外的所有
元素都消失，上下滑動一下頁面又出現了。
給外層元素加一個overflow:hidden
當使用-webkit-overflow-scrolling: touch;時，同時使用::-webkit-scrollbar偽類的display:none隱藏滾動條在iOS 11+出現失效的情況，需要使用如下方案解決，參考：https://stackoverflow.com/que…
Andriod
針對部分瀏覽器非預期的快取機制，需要服務端新增如下HTTP頭資訊：
部分機型touchmove事件不連續觸發
Android的事件每次都要經過瀏覽器核心再發往UI執行緒，為了提高效率，如果瀏覽器核心中沒有設定preventDefault，Android就認為該頁面元素不需要touchmove事件，於是下次的事件就不經過核心，直接發往UI執行緒，於是js中就捕獲不到touchmove事件。
解決方案：在事件響應的地方設定preventDefault，這樣就可以源源不絕地接收到touch事件，比如在touchstart事件中執行e.preventDefault()，touchmove事件就會連續觸發。但是這種做法會取消掉瀏覽器其他的預設行為，比如頁面預設的滾動。。。
字號小於12px，或字號不是偶數，部分機型文字無法居中的問題
解決方案：使用transform: scale(0.5)進行縮放 or 字號大一點
scroll 相關方法相容問題
CSSOM 檢視模型新增了一些 scroll 相關的方法，參考：https://drafts.csswg.org/csso…
polyfill：https://github.com/iamdustan/…
綜合問題
禁止頁面滑動
當你需要禁止移動端頁面滑動的時候，在iOS下，需要禁止頁面中的touchmove事件，在安卓下，需要給html, body元素加上如下CSS：height:100%;overflow:hidden;。
推薦使用以下程式碼進行處理：
css.sm-no-scroll {
height: 100%;
overflow: hidden;
}
但由於禁掉了touchmove事件，導致iOS下你希望滾動的部分也無法滾動了，因此對於希望滾動的部分，通過e.stopPropagation保留原有滾動效果，並針對回彈動畫的互動，建議使用如下程式碼宣告一個可滾動區域：
/* 以下屬性新增到滾動容器上 */
-webkit-overflow-scrolling: touch;
overflow: auto;
被遮蔽的 class
有些瀏覽器或者外掛會通過DOM元素的class來識別是否為廣告，並隱藏或者直接刪除DOM。
-
mask
-
banner
-
fixed
-
sticky
點透
移動端的 click 觸發順序是touchstart->touchmove->touchend->mousedown->mousemove->mouseenter->click。
在重疊的區域裡，被遮蓋的元素繫結click，遮蓋的元素繫結touch事件，且touch後遮蓋的元素會隱藏的話，就會造成穿透，因為click是在touch之後延遲觸發的，瀏覽器會誤認為是在遮蓋的元素上觸發了click。
解決方案：fastclick or point-event:none。