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


    近期完成了一个新的项目(搜狐直播),其中又涉及到了 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。

    原创文章,转载请注明出处http://www.cnblogs.com/zhangdaiping
  • 相关阅读:
    【转载】关于sql server 代理(已禁用代理xp)
    Silverlight中将WriteableBitmap互转byte数组
    思迅Pay PC ,WIN7 ,KB3042058
    微软新Edge浏览器 WIN7 无法登录
    List<SelectListItem> 转为 SelectList
    图片jpg,png转为BASE64编码
    “Newtonsoft.Json”已拥有为“Microsoft.CSharp”定义的依赖项。
    mac os 10.15.1 懒人 .CDR
    微信刷脸SDK获取sub_openid
    win7 安装 visual studio 2019 时闪退(VS2019)
  • 原文地址:https://www.cnblogs.com/zhangdaiping/p/3170892.html
Copyright © 2020-2023  润新知