iOS Safari
- 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 會無視
metauser-scalable=no，需要用e.preventDefault來解決。個人解決方案mobile-polyfill/ios10-user-scalable-no.js。建議結合ua-parser-js使用，因為iOS 10+的其他瀏覽器（QQ、UC）等都還是尊敬這個東西的。 - 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…
|
1 2 3 4 5 6 7 8 9 |
#element::-webkit-scrollbar { background-color: transparent; } #element::-webkit-scrollbar-track { background-color: transparent; } #element::-webkit-scrollbar-thumb { background-color: transparent; } |
Andriod
- 針對部分瀏覽器非預期的快取機制，需要服務端新增如下HTTP頭資訊：
|
1 2 3 |
Cache-Control:no-cache, no-store, must-revalidate Expires:0 Pragma:no-cache |
- 部分機型
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;。
推薦使用以下程式碼進行處理：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// scrollLock 視窗控制器，用於在彈層出現時禁止、消失時恢復螢幕的滑動 const scrollLock = (function () { let isLocked = false; function touchmoveHandler(e) { e.preventDefault(); } function lock() { // 為 html、body元素設定 overflow:hidden height:100% 以限制滾動 // https://gist.github.com/ufologist/ac1dfa6fa6192a5879e9d9dcdbd0bf54 document.body.classList.add('sm-no-scroll'); document.documentElement.classList.add('sm-no-scroll'); // 限制頁面在iOS下的滑動 document.addEventListener('touchmove', touchmoveHandler); isLocked = true; } function unlock() { document.body.classList.remove('sm-no-scroll'); document.documentElement.classList.remove('sm-no-scroll'); document.removeEventListener('touchmove', touchmoveHandler); isLocked = false; } return function (on) { if (arguments.length === 0) { if (isLocked) { unlock(); } else { lock(); } } else { if (on && !isLocked) { lock(); } else if(!on && isLocked) { unlock(); } } }; })(); |
|
1 2 3 4 |
.sm-no-scroll { height: 100%; overflow: hidden; } |
但由於禁掉了touchmove事件，導致iOS下你希望滾動的部分也無法滾動了，因此對於希望滾動的部分，通過e.stopPropagation保留原有滾動效果，並針對回彈動畫的互動，建議使用如下程式碼宣告一個可滾動區域：
|
1 2 3 |
/* 以下屬性新增到滾動容器上 */ -webkit-overflow-scrolling: touch; overflow: auto; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// el 為滾動容器 el.addEventListener('touchstart', function (e) { this.allowUp = (this.scrollTop > 0); this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight); this.lastY = e.targetTouches[0].pageY; }); el.addEventListener('touchmove', function (e) { let up = (e.targetTouches[0].pageY > this.lastY); let down = !up; this.lastY = e.targetTouches[0].pageY; if ((up && this.allowUp) || (down && this.allowDown)) { e.stopPropagation(); } else { e.preventDefault(); } }); |
被遮蔽的 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。