移動端開發常見問題彙總(未完待續)
阿新 • • 發佈:2018-12-30
趁著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彈窗後,在彈窗上滑動會導致下層的頁面跟著滾動,這個叫 “滾動穿透”。
具體可以參考這篇文章移動端滾動穿透問題,本人專案採用跟文章中的終極解決方案類似方式解決。