移动端web页面使用position:fixed问题总结
2013-07-05 16:45
387 查看
近期完成了一个新的项目(搜狐直播),其中又涉及到了 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
操作步骤:1、页面滚动到底部;2、选中底部输入框,使输入框进入focus状态;3、点击页面其他区域,使输入框失去焦点;
问题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。
正常界面
图中被红色选中区域为 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
操作步骤:1、页面滚动到底部;2、选中底部输入框,使输入框进入focus状态;3、点击页面其他区域,使输入框失去焦点;
问题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。
相关文章推荐
- 移动端web页面使用position:fixed问题总结
- 移动端web页面使用position:fixed问题
- 倾力总结40条常见的移动端Web页面问题解决方案
- 倾力总结40条常见的移动端Web页面问题解决方案
- 倾力总结40条常见的移动端Web页面问题解决方案
- 第二篇、倾力总结40条常见的移动端Web页面问题解决方案
- 关于移动端使用局部滚动解决ios不支持position:fixed后产生的问题
- 倾力总结40条常见的移动端Web页面问题解决方案
- WebView使用时需要注意的细节问题(持续总结)
- 解决移动端web页面整个背景图横向滚动问题
- Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案
- Android使用Webview显示页面以及点击跳转startActivity问题
- 转 [开发总结]WebView使用中遇到的一些问题&解决
- 基于MVC4+EasyUI的Web开发框架经验总结(16)--使用云打印控件C-Lodop打印页面或套打报关运单信息
- 移动端踩坑之旅-ios下fixed、软键盘相关问题总结
- 解决移动端web页面整个背景图横向滚动问题
- 【IE6.0 Bug总结之四】position:fixed无效问题
- 移动端Web页面问题解决方案
- 【转】40条常见的移动端Web页面问题解决方案
- [开发总结]WebView使用中遇到的一些问题&解决