前端開發總結（移動篇）

標籤：tar   對齊   strong   style   前端開發   col   標籤   hone   前端   

注意：Chrome類比手機的顯示的介面是有誤差的，強烈建議一定要在真機測試自己的移動端頁面。

 

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

設定視窗高度document.documentElement.style.height = window.innerHeight + ‘px‘; 

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

採用fixed布局，zoom屬性為1。

 

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

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

 

Iphone的相容問題：

1.:active偽類不生效

阻止touchstart預設事件。（如果沒有什麼手勢事件的需求的話，最好全部禁止手勢事件）

 

2.input=“search”無法觸發IME。

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

 

3.禁用長按事件。

慎用user-select:none;屬性，會導致無法iphone無法輸入。

 

4.webview回彈效果。

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

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

 

PS：雖然有辦法阻擋X5核心（QQ瀏覽器核心）的“網頁有XXX提供”的這些資訊，但是並沒有真正阻擋iphone的回彈效果。拖拽還是會回彈。

 

前端開發總結（移動篇）