作者：LeuisKen
https://segmentfault.com/n/1330000011368344
iOS Safari
Safari下使用border-image掰邢，不能設(shè)置border-color: transparent垦页。
使用<meta name="format-detection" content="telephone=no" />解決連續(xù)數(shù)字誤識別為電話號碼導(dǎo)致樣式出錯的問題破停。
Safari的iframe會自動去適應(yīng)內(nèi)容大小而無視CSS中設(shè)置的width恨憎，該特性只能通過scrolling="no"屬性關(guān)閉，并通過設(shè)置如下CSS樣式設(shè)置width：width: 1px; min-width: 100%;;但是設(shè)置scrolling="no"會導(dǎo)致安卓下iframe無法滑動励负，目前只能通過UA設(shè)備判斷解決捶牢。
Safari 10以下的flex布局不認(rèn)width和flex-basis，但是會認(rèn)min-width，詳見Can I Use 中 flex 的 Known issue第一條拍柒。
在 Safari 中心傀，setTimeout 無法觸發(fā) focus 事件，且不支持 autofocus 屬性拆讯≈校可以使用Promise.resolve().then()來執(zhí)行需要異步的 focus 代碼。
iOS 10 safari 會無視meta user-scalable=no种呐，需要用e.preventDefault來解決宰翅。個人解決方案mobile-polyfill/ios10-user-scalable-no.js。建議結(jié)合ua-parser-js使用爽室，因為iOS 10+的其他瀏覽器（QQ汁讼、UC）等都還是尊敬這個東西的。
Safari下開無痕瀏覽模式，操作localStorage會直接報錯嘿架，需要try catch瓶珊。
某同學(xué)用unescape解析encodeURIComponent編碼的信息，掉進了亂碼的坑耸彪。
type=search有坑伞芹。
position:fixed有坑。
部分版本的padStart/padEnd實現(xiàn)有bug蝉娜，會出現(xiàn)null
http://www.joycesong.com/arch…
ios版本：11.1-11.3
使用swiper或者transform屬性時唱较，有一定概率出現(xiàn)transform的元素以外的所有?
元素都消失，上下滑動一下頁面又出現(xiàn)了召川。
給外層元素加一個overflow:hidden屬性即可解決南缓。
當(dāng)使用-webkit-overflow-scrolling: touch;時，同時使用::-webkit-scrollbar偽類的display:none隱藏滾動條在iOS 11+出現(xiàn)失效的情況扮宠，需要使用如下方案解決西乖，參考：https://stackoverflow.com/que…
Andriod
針對部分瀏覽器非預(yù)期的緩存機制，需要服務(wù)端添加如下HTTP頭信息：
部分機型touchmove事件不連續(xù)觸發(fā)
Android的事件每次都要經(jīng)過瀏覽器內(nèi)核再發(fā)往UI線程坛增，為了提高效率获雕，如果瀏覽器內(nèi)核中沒有設(shè)置preventDefault，Android就認(rèn)為該頁面元素不需要touchmove事件收捣，于是下次的事件就不經(jīng)過內(nèi)核届案，直接發(fā)往UI線程，于是js中就捕獲不到touchmove事件罢艾。
解決方案：在事件響應(yīng)的地方設(shè)置preventDefault楣颠，這樣就可以源源不絕地接收到touch事件，比如在touchstart事件中執(zhí)行e.preventDefault()咐蚯，touchmove事件就會連續(xù)觸發(fā)童漩。但是這種做法會取消掉瀏覽器其他的默認(rèn)行為，比如頁面默認(rèn)的滾動春锋。矫膨。。
字號小于12px期奔，或字號不是偶數(shù)侧馅，部分機型文字無法居中的問題
解決方案：使用transform: scale(0.5)進行縮放 or 字號大一點
scroll 相關(guān)方法兼容問題
CSSOM 視圖模型新增了一些 scroll 相關(guān)的方法，參考：https://drafts.csswg.org/csso…
polyfill：https://github.com/iamdustan/…
綜合問題
禁止頁面滑動
當(dāng)你需要禁止移動端頁面滑動的時候呐萌，在iOS下馁痴，需要禁止頁面中的touchmove事件，在安卓下肺孤，需要給html, body元素加上如下CSS：height:100%;overflow:hidden;罗晕。
推薦使用以下代碼進行處理：
css.sm-no-scroll?{
????height:?100%;
????overflow:?hidden;
}
但由于禁掉了touchmove事件济欢，導(dǎo)致iOS下你希望滾動的部分也無法滾動了，因此對于希望滾動的部分攀例，通過e.stopPropagation保留原有滾動效果船逮，并針對回彈動畫的交互，建議使用如下代碼聲明一個可滾動區(qū)域：
/*?以下屬性添加到滾動容器上?*/
-webkit-overflow-scrolling:?touch;
overflow:?auto;
被屏蔽的 class
有些瀏覽器或者插件會通過DOM元素的class來識別是否為廣告粤铭，并隱藏或者直接刪除DOM挖胃。
1、mask
2梆惯、banner
3酱鸭、fixed
4、sticky
點透
移動端的 click 觸發(fā)順序是touchstart->touchmove->touchend->mousedown->mousemove->mouseenter->click垛吗。
在重疊的區(qū)域里凹髓，被遮蓋的元素綁定click，遮蓋的元素綁定touch事件怯屉，且touch后遮蓋的元素會隱藏的話蔚舀，就會造成穿透，因為click是在touch之后延遲觸發(fā)的锨络，瀏覽器會誤認(rèn)為是在遮蓋的元素上觸發(fā)了click赌躺。
解決方案：fastclick?or?point-event:none。
感興趣的小伙伴羡儿，可以關(guān)注公眾號【grain先森】礼患，回復(fù)關(guān)鍵詞 “vue”，獲取更多資料掠归，更多關(guān)鍵詞玩法期待你的探索~
