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

时间:2023-03-09 06:38:45
移动端web页面使用position:fixed问题总结

近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章《移动Web产品前端开发口诀——“快”》中已经阐述过我对 iScroll 的态度,所以在这个项目中我决定不使用 iScroll,使用 position:fixed 实现头部、底部模块定位。在使用fixed的过程中,遇到了一些的问题,并且部分问题无法找到较好的解决方案。下面我就将这些问题一一阐述,提供给大家参考。

正常界面

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

图中被红色选中区域为 position:fixed 元素

问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部。(该问题已在iOS7 beta3修复)

测试环境:iPhone 4s&5 / iOS 6&7 / Safari

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

问题2:页面底部,footer输入框失去焦点时,header定位出错。当页面有滚动动作时,header定位恢复正常。(该问题已在iOS7 beta3修复)

测试环境:iPhone 4s&5 / iOS 6&7 / Safari

操作步骤:1、页面滚动到底部;2、选中底部输入框,使输入框进入focus状态;3、点击页面其他区域,使输入框失去焦点;

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

问题3:当页面发生跳转,再退回时,fixed区域消失,当内容获得焦点时,fixed区域才显示。

测试环境:iPhone 4 / iOS 5 / Safari(其他版本未发现此问题

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

问题4:部分浏览器不支持 fixed。

测试环境:魅族MX2 / 自带浏览器(MX2上QQ、UC浏览器支持fixed

解决办法:使用 userAgent 检测,如果是魅族MX2自带浏览器则禁用 position:fixed,使用 position:relative 代替。

PS: iOS4 也是不支持 fixed 的。

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

问题5: 在滚屏过程中,fixed定位异常,touchend之后恢复正常。

测试环境:三星i9100(S2) / 自带浏览器(QQ、UC浏览器正常

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

总结

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

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