趁著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彈窗後，在彈窗上滑動會導致下層的頁面跟著滾動，這個叫 “滾動穿透”。

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