某些手機上 fixed 元素在頁面滾動時會消失，某些 IOS 設備上觸發不了點擊事件，IOS 設備上點擊事件有 300ms 延遲，IOS 設備上 fixed 元素在鍵盤彈起時位置會變幻不定，在彈窗上滑動時底部頁面也跟著動，兩年移動端前端開發，我TM都經歷了什麼 ...
手機固有 bug
- 某些手機上 fixed 元素在頁面滾動時會消失
使用局部滾動，而不是整頁滾動
- 某些 IOS 設備上觸發不了點擊事件
在元素上加 pointer:cursor
- IOS 設備上點擊事件有 300ms 延遲
兩種方法，一是使用 fastclick.js（推薦）。二是不綁 click 事件，綁在 tap 事件上（此方法會導致開發時調試困難，模擬設備模式下觸發 tap 有 bug）
- IOS 設備上 fixed 元素在鍵盤彈起時位置會變幻不定
沒有很好的解決方案，應從產品設計層面避免這種情況（比如說做轉場頁面等）
- 在彈窗上滑動時底部頁面也跟著動
在彈窗上需要滾動的地方使用 Swiper，不需要滾動的地方加 ontouchmove="event.preventDefault()"
- 某些 IOS 設備上頁面滾動時不會連續觸發 scroll 事件
綁在 touchmove 事件上，但手指離開屏幕慣性滑動這段時間還是無法觸發，如果確實需要精細控制，可考慮 IScroll.js
- 瀏覽器刷新頁面後會記憶之前的滾動條位置
這通常可以提升用戶體驗，但有時我們需要禁止這種記憶，加上下麵兩行
history.scrollRestoration = 'manual'
window.onunload = () => window.scrollTo(0, 0)- h5 video 無法自動播放
無法實現，無法實現，無法實現。這是廠商為避免偷取流量強制規定的。兩個方法，一是從產品設計層面規避，二是降級為用戶觸屏播放，沒有第三種可能
相容性部分
Array.prototype.sort方法在某些手機上會不起作用
sort 方法傳入的比較函數應該返回一個數值，而不是布爾值。也就是應該使用 - 號，而不是 > 或 < 號
Object.assign方法在某些手機上會不起作用
參考 jQuery 的 $.extend 實現自己的對象合併方法。註意，Babel 僅轉譯語法，而不轉譯 API，所以使用這些 ES6+ 的 API 都存在不相容的風險，如果引入了 Babel 的 polyfill，那就不用擔心，否則就需要自己 polyfill
- CSS3 特性（flex 佈局，transform 等）不支持
加上首碼，加上首碼，加上首碼。加完首碼不敢說 100% 支持吧，90% 還是有保證的，尤其是移動端。手動加是不可能手動加的，可使用 autoprefixer 配合構建工具處理
- 1 像素問題
這裡的1像素並非1邏輯像素（也就是CSS像素），而是1物理像素，可以採用縮放的方法實現，首先設置 width: 1px，然後使用媒體查詢根據不同的dpr縮放不同的比例，貼一下 less 的實現
.one-x { height: 1px;}
.one-y { width: 1px; }
@dpr: 1.5, 2, 3;
@len: length(@dpr) + 1;
.genScale(@n: 1) when (@n < @len) {
@val: extract(@dpr, @n);
@media (min-device-pixel-ratio: @val) {
.one-x {
transform: scaleY(1/@val);
}
.one-y {
transform: scaleX(1/@val);
}
}
.-fix-less-compiler-bug- {
display: block;
}
.genScale(@n + 1);
}
.genScale();- 吸頂問題
IOS 直接使用 position: sticky，安卓機型綁 scroll 事件。（需要提一句的是，IOS 的 scroll 事件觸發不連續，安卓對 sticky 的支持不太好。所以上面的方法是比較科學地）附上機型判斷代碼
const ua = window.navigator.userAgent.toLowerCase()
const isAndroid = /android/.test(ua)
const isIOS = /iphone|ipad|ipod/.test(ua)庫 & 框架
- jQuery 的 ajax 方法傳參 data 項問題
data 的 key/value 鍵值對的 value 為 undefined 時 jQuery 會直接不傳這一條，為 null 時傳空字元串
- Vue 修改了數據對象視圖不更新
就是不更新，就是不更新，就是不更新。這個官網還有寫了。這個和 Vue 監測數據變化的機制有關。Vue 無法檢測到對象的新增屬性和 vm.arr[index] = newVal 這種方式更新的數組變化。可用以下方法觸發
vm.arr = [ ...vm.arr ]
vm.obj = { ...vm.obj }細節
- IOS 區域滾動卡頓不絲滑
加上 -webkit-overflow-scrolling: touch
- 某些手機上點擊時元素高亮閃一下
加上 -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
- 隱藏滾動條
加上 ::-webkit-scrollbar{ display: none }
---------------------------- 我是結束線 ----------------------------
暫時就這些了，更多的以後更新
