移动端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上面有问题,有输入框的页面,发现问题挺大的,后来针对特殊浏览器进行检测:

移动端web页面使用position:fixed问题
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);
}
移动端web页面使用position:fixed问题

在测试的时候发现某些android浏览器(华为),在表单获取焦点时,会出现崩溃现象

 

 

总结

  • 在 android 手机下 fixed 表现要比 iOS 更好,软键盘弹出时,不会影响fixed元素定位;
  • 不要在 fixed 元素中使用 input / textarea 元素。

还是保留之前的态度,依然不推荐在 Android下使用 iScroll。在开发项目时,可以考虑分为两个版本:iOS下使用 iScroll的解决方案,Android下使用 position:fixed。

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

上一篇:阿里ECS 7天训练营


下一篇:VuePress个人博客搭建