首页 > 移动平台 > 详细

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

时间:2014-01-17 00:21:28      阅读:6175      评论:0      收藏:0      [点我收藏+]

标签:android   代码   text   display   doc   css   opera   焦点   

在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用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上面有问题,有输入框的页面,发现问题挺大的,后来针对特殊浏览器进行检测:

bubuko.com,布布扣
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);
}
bubuko.com,布布扣

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

 

 

总结

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

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

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

标签:android   代码   text   display   doc   css   opera   焦点   

原文:http://www.cnblogs.com/xiaohui108/p/3522339.html

(0)
(2)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号