移動web前端開發小結

注意：Chrome模擬手機的顯示的界面是有偏差的，強烈建議必定要在真機測試本身的移動端頁面（以移動端頁面爲準）。

 

1.頁面高度渲染錯誤，頁面的高度是否包含了導航，（華爲手機就是恰恰有底部菜單）

設置窗口高度document.documentElement.style.height = window.innerHeight + 'px'; 

2.移動端背景圖縮放固定。

採用fixed佈局，zoom屬性爲1。

 

3.文本行高偏上不對齊。

設置line-height設置成normal。不要寫死行高值。

 

4.文件上傳沒法喚醒文件。

部分手機沒法兼容input file中accept等屬性。移除便可。

 

Iphone的兼容問題：

1.:active僞類不生效

阻止touchstart默認事件。（若是沒有什麼手勢事件的需求的話，最好所有禁止手勢事件）

 

2.input=「search」沒法觸發輸入法。

須要<form>標籤包起來才能觸發。

 

3.禁用長按事件。

切記不要使用用user-select:none;屬性，會致使沒法iphone沒法輸入。

 

4.webview回彈效果。

若是頁面是全屏，不超過可視高度的話，建議禁用touchmove事件。

若是頁面不是全屏，超過可視高度的話，就不要禁用touchmove事件。

 

5.ios回退不刷新

var isPageHide = false
window.addEventListener("pageshow", function() {
    if (isPageHide) {
        window.location.reload()
    }
})
window.addEventListener("pagehide", function() {
    isPageHide = true
})

 

 6.移動兼容性測試。

使用ie瀏覽器來測試兼容語法。（vconsole這個測試工具檢測不出來，555）

PS：IE11瀏覽器的開發者工具能夠排查出不兼容的es6語法，只要IE11能運行，android4.x或者ios9以上的瀏覽器均可以運行。

 

 

PS：雖然有辦法阻擋X5內核（QQ瀏覽器內核）的「網頁有XXX提供」的這些信息，可是並無真正阻擋iphone的回彈效果。拖拽仍是會回彈。