1. 程式人生 > >移動端開發常見問題彙總(未完待續)

移動端開發常見問題彙總(未完待續)

趁著2018年的最後一天還沒有過去,就寫篇文章吧,主要是來簡單總結下移動端開發中存在的問題吧;當然移動端的問題肯定不止下面的問題,未完待續。。。

禁止頁面縮放meta標籤相容性問題

移動端h5展示一般通過設定meta的viewport來規範頁面的展示效果,常使用如下配置:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0 user-scalable=no">

上面的作用之一就是禁止使用者縮放,大部分裝置下是沒有問題的,但是:

在IOS >= 10 系統的safari下,user-scalable=no已不起作用

既然縮放有相容性問題,那麼可以通過js來完成禁止縮放,比如下面:

// 禁用雙指縮放
document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

// 禁止雙擊縮放
var lastTouch = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouch <= 300) {
    event.preventDefault();
  }
  lastTouch = now;
}, false);

ios input內陰影的問題

input輸入框在ios下會預設有頂部內陰影的問題,在Android平臺下沒有這個問題,ios下的內陰影如下圖所示:

解決辦法為input新增如下樣式即可:

input[type="text"] {
  -webkit-appearance: none;
}

彈框滾動穿透的問題

所謂彈框滾動穿透問題,是指移動端彈出fixed彈窗後,在彈窗上滑動會導致下層的頁面跟著滾動,這個叫 “滾動穿透”。

具體可以參考這篇文章移動端滾動穿透問題,本人專案採用跟文章中的終極解決方案類似方式解決。