移动端web页面使用position:fixed问题

2021-09-27 00:06:21

在做移动端项目时，碰到一个很纠结的问题，头部固定的问题，一开始使用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。

移动端web页面使用position:fixed问题

码农公寓