移動端web頁面使用position:fixed問題總結

近期完成了一個新的項目（搜狐直播），其中又涉及到了 fixed（固定位置定位）的問題，在以前的文章《移動Web產品前端開發口訣——「快」》中已經闡述過我對 iScroll 的態度，因此在這個項目中我決定不使用 iScroll，使用 position:fixed 實現頭部、底部模塊定位。在使用fixed的過程當中，遇到了一些的問題，而且部分問題沒法找到較好的解決方案。下面我就將這些問題一一闡述，提供給你們參考。

正常界面

圖中被紅色選中區域爲 position:fixed 元素

 

問題1：footer輸入框 focus 狀態，footer 被居中，而不是吸附在軟鍵盤上部。(該問題已在iOS7 beta3修復)

測試環境：iPhone 4s&5 / iOS 6&7 / Safari

 

問題2：頁面底部，footer輸入框失去焦點時，header定位出錯。當頁面有滾動動做時，header定位恢復正常。(該問題已在iOS7 beta3修復)

測試環境：iPhone 4s&5 / iOS 6&7 / Safari

操做步驟：一、頁面滾動到底部；二、選中底部輸入框，使輸入框進入focus狀態；三、點擊頁面其餘區域，使輸入框失去焦點；

 

問題3：當頁面發生跳轉，再退回時，fixed區域消失，當內容得到焦點時，fixed區域才顯示。

測試環境：iPhone 4 / iOS 5 / Safari（其餘版本未發現此問題）

 

問題4：部分瀏覽器不支持 fixed。

測試環境：魅族MX2 / 自帶瀏覽器（MX2上QQ、UC瀏覽器支持fixed）

解決辦法：使用 userAgent 檢測，若是是魅族MX2自帶瀏覽器則禁用 position:fixed，使用 position:relative 代替。

PS: iOS4 也是不支持 fixed 的。

 

問題5： 在滾屏過程當中，fixed定位異常，touchend以後恢復正常。

測試環境：三星i9100(S2) / 自帶瀏覽器（QQ、UC瀏覽器正常）

 

總結

• 在 android 手機下 fixed 表現要比 iOS 更好，軟鍵盤彈出時，不會影響fixed元素定位；
• 不要在 fixed 元素中使用 input / textarea 元素。

仍是保留以前的態度，依然不推薦在 Android下使用 iScroll。在開發項目時，能夠考慮分爲兩個版本：iOS下使用 iScroll的解決方案，Android下使用 position:fixed。