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

摘要:
在使用fixed的过程中,遇到了一些的问题,并且部分问题无法找到较好的解决方案。正常界面图中被红色选中区域为position:fixed元素问题1:footer输入框focus状态,footer被居中,而不是吸附在软键盘上部。测试环境:魅族MX2/自带浏览器解决办法:使用userAgent检测,如果是魅族MX2自带浏览器则禁用position:fixed,使用position:relative代替。在开发项目时,可以考虑分为两个版本:iOS下使用iScroll的解决方案,Android下使用position:fixed。

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

正常界面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PS: iOS4 也是不支持 fixed 的。

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

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

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

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

总结

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

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

免责声明:文章转载自《移动端web页面使用position:fixed问题总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android 开机问题知多少Blocks学习笔记总结下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

如何实现在H5里调起高德地图APP?

http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点。适合于展示某个餐馆,商场等,让用户自行选择前往方式。 场景一、在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发中,我们会在地图上标记marker点或者使用地图上的poi点,这时...

移动端css、Js优处理

CSS 篇 0.5px细线 移动端 H5 项目越来越多,设计师对于 UI 的要求也越来越高,比如 1px 的边框。在高清屏下,移动端的 1px 会很粗。 那么为什么会产生这个问题呢?主要是跟一个东西有关,DPR(devicePixelRatio) 设备像素比,它是默认缩放为 100%的情况下,设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2(...

maven新建项目的几种方式和启动

方式一: 第1步:转到New菜单Other..->Maven->Maven Project,然后单击Next。如下图所示 - 第2步:在New Maven Project向导中,选择Create a simple project并指定项目保存的目录(如:F:workspMavenwebproject),然后单击Next。如下图所示 - 第3...

VSCode插件开发全攻略(五)跳转到定义、自动补全、悬停提示

更多文章请戳VSCode插件开发全攻略系列目录导航。 跳转到定义 跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location。 为了示例更加有意...

15个优秀的第三方 Web 技术集成 dodo

  在 Web 开发与设计中,事事亲历亲为并非好事,我们经常被告诫不要重复发明轮『子』(don't reinvent thewheel),大而全式的开发不仅是巨大的负担,而且带来更多安全隐患,你毕竟不是所有技术的行家,业界有很多优秀的第三方技术可以借用或者集成,我们必须承认,这些技术比我们自己所能设计的要好得多。本文介绍了15种可以集成到我们的 Web 站...

iOS开发UI篇—iPad和iPhone开发的比较

一、iPad简介 1.什么是iPad   一款苹果公司于2010年发布的平板电脑   定位介于苹果的智能手机iPhone和笔记本电脑产品之间   跟iPhone一样,搭载的是iOS操作系统    2.iPad的市场情况   截止至2013年10月23日,iPad已经累计销售1.7亿台   在平板市场的占有率高达81% 二、关于iphone和iPad 说明:...