兩年移動端前端開發問題吐血彙總

手機固有 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 }

---------------------------- 我是結束線 ----------------------------

暫時就這些了，更多的之後更新