兩年移動端前端開發問題吐血彙總
手機固有 bug
- 某些手機上 fixed 元素在頁面滾動時會消失
使用區域性滾動，而不是整頁滾動
- 某些 IOS 裝置上觸發不了點選事件
在元素上加pointer:cursor
- IOS 裝置上點選事件有 300ms 延遲
兩種方法，一是使用 fastclick.js（推薦）。二是不綁click
事件，綁在tap
事件上（此方法會導致開發時除錯困難，模擬裝置模式下觸發tap
有 bug）
- IOS 裝置上 fixed 元素在鍵盤彈起時位置會變幻不定
沒有很好的解決方案，應從產品設計層面避免這種情況（比如說做轉場頁面等）
- 在彈窗上滑動時底部頁面也跟著動
在彈窗上需要滾動的地方使用ofollow,noindex" target="_blank">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 }
---------------------------- 我是結束線 ----------------------------
暫時就這些了，更多的以後更新