移动Web开发实践——解决position:fixed自适应BUG
在移动web中使用position:fixed,会踩到很多坑,在我之前的一篇文章《移动端web页面使用position:fixed问题总结》中已经总结了很多bug,但是在后续的开发中有关fixed的未知bug越来越多,我也在尽量的寻找解决方案。
这篇文章就来先解决一个坑,fixed元素的宽度自适应。
当横屏时,fixed元素不能自适应横屏的宽度,bug表现如下:
这个bug主要在android自带浏览器下出现,与手机型号和系统版本无关,几乎所有android都无法幸免,在不同的手机下可能表现会有一点点差异,但都是同样的bug。
导致bug的原因我不清楚,如有高人请指点。
下面这个解决方案在12款主流手机上测试通过(三星、小米、魅族、华为、中心等),如果还未完全解决可以回复这篇文章。
解决问题的关键就是:fixed元素内部必须嵌套一个position:absolute
元素,用来装载内容,目的就是为了让内容脱离fixed文档流,屏蔽一些fixed的坑
别问我为什么,我也不知道为什么,但是这样写竟然神奇的好使了,如有高人请指点迷津。
我在下面的例子中声明了两种最常用的fixed元素:header和footer
position fixed header
header中我使用了float来定位左右两边的icon。右侧icon一定不能使用position:absolute
定位,如果使用了absolute,在一些android自带浏览器下横屏时,右侧icon无法自适应到右侧,会出现与上面第二幅图中差不多的bug。
<header>
<div class="fixed">
<div class="wrap float">
<div class="left-icon">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<h1>HEADER</h1>
<div class="right-icon">
<span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-list"></span>
</div>
</div>
</div>
</header>
position fixed footer
footer中是一个flex的布局,'display:flex'容器一定不要直接声明到fixed元素下,必须使用'position:absolute'容器包装一层。
<footer>
<div class="fixed">
<div class="wrap flex">
<a href="#"><span class="glyphicon glyphicon-picture"></span></a>
<a href="#"><span class="glyphicon glyphicon-film"></span></a>
<a href="#"><span class="glyphicon glyphicon-qrcode"></span></a>
</div>
</div>
</footer>
解决方案DEMO:http://jsbin.com/omaCOSir/latest
题外话
一个placeholder自适应bug,页面中使用<input>
标签并且有属性placeholder
,在页面横屏再转回竖屏时,会导致页面无法自适应,无论是android还是ios都会中招。
解决方法是,在<input>
外层容器中加overflow:hidden
,这个bug我没有截图,大家可以自测。
转自:https://github.com/maxzhang/maxzhang.github.com/issues/11
移动Web开发实践——解决position:fixed自适应BUG的更多相关文章
- Redis的Python实践,以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》
首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结 ...
- 移动Web开发实践
移动设备的高速发展给用户带来了非常大的便利.用户使用Android.iPhone和其他移动设备非常easy接入互联网. 移动设备对网页的性能要求比較高.以下就说说Mobile Web开发的一些心得. ...
- 完美解决IE6不支持position:fixed的bug
示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...
- js完美解决IE6不支持position:fixed的bug
详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...
- 解决IE6不支持position:fixed的bug
/*完整代码 */ /* 除IE6浏览器的通用方法 */ .ie6fixedTL { position: fixed; left:; top:; } .ie6fixedBR { position: f ...
- 初学web开发——怎么解决无法找到路径的问题
刚刚接触web开发一个月,在接手项目时,总会出项无法找到改路径的问题, 那么,这个是什么原因造成的呢?因为我现在使用的是MVC架构,大部分的原因是在View里创建了视图,但是并未在controller ...
- 修正IE6不支持position:fixed的bug(转)
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...
- 移动web开发实践-css3(1)盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
- 移动端字体缩放问题解决方案-摘自《html5移动web开发实践》
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- inode节点
目录 一.简介 二.信息 inode的内容 inode的大小 3.inode号码 三.目录文件 四.硬连接 五.软链接 六.inode的特殊作用 一.简介 理解inode,要从文件储存说起. 文件储存 ...
- [BUUCTF]PWN3——warmup_csaw_2016
[BUUCTF]PWN3--warmup_csaw_2016 题目网址:https://buuoj.cn/challenges#warmup_csaw_2016 步骤: 例行检查,64位,没有开启任何 ...
- Linux中find命令与三剑客之grep和正则
昨日内容回顾 1.每个月的3号.5号和15号,且这天时周六时 执行 00 00 3,5,15 * 6 2.每天的3点到15点,每隔3分钟执行一次 */3 3-15 * * * 3.每周六早上2点半执行 ...
- C++ 未初始化内存出现 flashback
在 C++ 中分配一个未初始化内存,然后读取它,会读取到这块内存之前被使用所留下的值,这种现象我称之为 flashback. 栈内存很容易出现这种现象,而且很容易观测出某种规律. for (int i ...
- CF1064A Make a triangle! 题解
Content 有三条长度分别为 \(a,b,c\) 的线段.你可以在一个单位时间内将一条线段的长度增加 \(1\),试求出能使这三条线段组成一个三角形的最短时间. 数据范围:\(1\leqslant ...
- UVA760 DNA Sequencing 题解
Content 给出两个小写字母组成的字符串,求两个字符串的最长公共子串,如有多个按字典序顺序输出,如没有输出 No common sequence.,每两组数据间输出一个空行,最后一组数据后不应输出 ...
- centos7修改时区EDT------CST
root@localhost ~]# date Wed Oct 16 01:34:16 EDT 2019 [root@localhost ~]# cd /etc/ [root@localhost et ...
- 五、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
- SpringBoot简单整合Actuator监控
pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>s ...
- vsp配合Qt5开发,解决virtual void * __cdecl PopDialogManger::qt_metacast
Qt错误提示 virtual void * __cdecl PopDialogManger::qt_metacast(char const*)"(?qt_metacast@PopDialog ...