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

在做移動端項目時，碰到一個很糾結的問題，頭部固定的問題，一開始使用fixed，發現一系列的問題，

問題1：footer輸入框 focus 狀態，footer 被居中，而不是吸附在軟鍵盤上部。

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

問題2：頁面底部，footer輸入框失去焦點時，header定位出錯。當頁面有滾動動作時，header定位恢復正常。

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

操作步驟：1、頁面滾動到底部；2、選中底部輸入框，使輸入框進入focus狀態；3、點擊頁面其他區域，使輸入框失去焦點；

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

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

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

測試環境：魅族MX2 / 自帶瀏覽器（MX2上QQ、UC瀏覽器支持fixed，魅族的系統近期有過升級，更新之后自帶瀏覽器就可以支持fixed）

解決辦法：使用 userAgent 檢測，如果是魅族MX2自帶瀏覽器則禁用 position:fixed，使用 position:relative 代替。
PS: iOS4 也是不支持 fixed 的。

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

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

問題6： 部分低版本Android對支持不好，video poster屬性設置的封面圖會遮擋fixed元素。

測試環境：摩托羅拉ME525+ / Android 2.3.4 / 自帶瀏覽器、QQ、UC瀏覽器

問題7： WP8下，QQ、UC瀏覽器滾動頁面時footer定位錯誤，會往上偏移，是由於地址欄收起的緣故。

測試環境：Nokia Lumia920 / WP8 / UC、QQ（自帶瀏覽器正常）

 

 

發現iphone4/4s上面有問題，有輸入框的頁面，發現問題挺大的，后來針對特殊瀏覽器進行檢測：

function isSupportFixed() {
    var userAgent = window.navigator.userAgent, 
        ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/),
        ios5below = ios && ios[2] && (parseInt(ios[2].replace(/_/g, '.'), 10) < 5),
        operaMini = /Opera Mini/i.test(userAgent),
        body = document.body,
        div, isFixed;

    div = document.createElement('div');
    div.style.cssText = 'display:none;position:fixed;z-index:100;';
    body.appendChild(div);
    isFixed = window.getComputedStyle(div).position != 'fixed';//不支持fixed的會設置成absolute
    body.removeChild(div);
    div = null;

    return !!(isFixed || ios5below || operaMini);
}

在測試的時候發現某些android瀏覽器（華為），在表單獲取焦點時，會出現崩潰現象

 

 

總結

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

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