移动端部分浏览器对于fixed支持颇为棘手,经过亲身实践和查阅大量资料,得到以下兼容列表:
-
ios safari --ios5+强力支持,ios4及更早版本不支持
-
android 2.1 --及更早版本不支持
-
android 2.2 --支持
-
android 2.3 --支持,需要设置页面不可缩放,即:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-
android 3.0+ --支持,不需要屏蔽页面缩放
-
blackberry 5.0 --支持
-
blackberry 7.0 --支持(仅仅是在模拟器中测试)
-
blackberry Playbook (1.0.7) --支持、存在bug(可忽略)
-
firefox mobile --支持
-
opera mobile --支持、存在bug
-
opera mini --不支持
-
windows phone 7 --不支持
-
webos --2.0+支持
-
amazon kindle fire --android2.3类似
-
amazon kindle(netfront) --甚至不支持字体颜色,对fixed支持很给力
由此可知,使用fixed并不能很好满足固定布局的需求,不过要做到渐进增强使用fixed依然是不错的选择,即fixed在支持浏览器中将降级为static。
除此之外,html5规范中新增了flexbox布局,如在webkit中的实现display: -webkit-box,规范了CSS盒模型,在flexbox布局模型里,子元素可以在任何方向(横向、纵向)上排列,它们的大小可以智能缩放以适应父元素的宽度或高度。同样也可以对其中任何一个或多个元素设置fix宽或高度,其余元素通过设置比例实现智能缩放。
再从需求入手,只要设置页面包裹器为flexbox且等高于浏览器视口,规定子元素排列方式为纵向(-webkit-box-orient:vertical),应用导航和底部工具栏设置固定像素,应用主体(中间部分)能自适应页面高度且可滚动即可。
代码实现如下:
1)DOM结构
1
2
3
4
5
|
<
div
id
=
"L-box"
>
<
div
class
=
"L-header"
></
div
>
<
div
class
=
"L-content"
id
=
"iscroll"
></
div
>
<
div
class
=
"L-footer"
>应用工具栏<
input
type
=
"tel"
placeholder
=
"测试虚拟键盘"
style
=
"width:120px;"
/></
div
>
</
div
>
|
2)css设置
1
2
3
4
5
|
html , body {
overflow
:
hidden
; }
#L-box {
height
:
100%
;
display
: -webkit-box; -webkit-box-orient:vertical; }
.L-header {
background
:
#fc0
;
height
:
50px
;
line-height
:
50px
;}
.L-content { -webkit-box-flex:
1
;
background
:
#f1f1f1
;
overflow
:
auto
;}
.L-footer {
background
:
#fc0
;
height
:
50px
;
text-align
:
center
;
line-height
:
50px
; }
|
具体demo地址:
demo代码详解:
-
在demo中由于要兼顾ios最大化应用界面的问题,即隐藏浏览器地址栏,添加了一小段js应用代码,建议在实际应用中继续保留,提高ios用户的使用体验
-
应用主体部分滚动利用iscroll库实现
说到此处,或许有人会疑问,既然应用主体部分滚动利用iscroll实现,关于导航栏和工具栏位置固定,用absolute定位一样可以实现,事实上也是如此。不过在使用absolute定位地址栏位置时,有两个地方需要注意:
-
额外的js计算得出主体部分的高度
-
在绝对定位元素上的input在获取焦点后,移动终端的虚拟键盘经常出现诡异的问题(慎重)
因此,综合考虑多方面元素,使用flexbox布局依然是最佳实践。
三,流体布局
1,介绍
流体布局在这里是指横向排列布局元素,兼容布局元素边框、内填充等因素,适应手机横竖屏切换和不同终端分辨率的一种页面布局方式。
图上所示功能分解:
-
横向排列7个子元素,长度均等
-
第一和最后子元素离视口左右边界分别为20px
-
每个子元素包含边框
-
适应手机横竖屏切换、不同终端分辨率
2,设计思路
分析以上功能点,其实用inline-block、float配置子元素,使之横向排列,再辅以百分比宽度即可。但由于每个元素均有外边框(一定意义上说不可设置百分比),要实现上述需求,则需在每个子元素外嵌一层dom节点,如此势必增加了设计复杂度,出于对节省代码量及dom渲染速率的考虑,这并算不得合理的设计。
对于这种百分比类表格结构,使用table是个不错的选择。table本身必须设置宽度(百分比、px均可),但在视口宽度不固定前提下,设置table宽度为px值显然是行不通,若设置百分比,则对于需求第二点(左右边界20px),又有点黔驴技穷。不过在此基础上稍作变通亦可,即在table外嵌一层block元素如div,设置div的左右边距20px,再次设定table宽度为100%即可。这种做法,先不考虑多嵌套一层包裹器,单就table本身而言,并不符合w3c新的规范,同时即使用它也略显老土了。
除此之外,在讲述固定布局时,曾提到flexbox布局,可满足在任意方向上排列子元素并使之适应父元素宽高,这无疑是实现此种布局的利器。
实现代码如下:
1)DOM结构
1
2
3
4
5
6
7
8
9
10
11
|
<section id=
"container"
>
<ul>
<li>
31
</li>
<li>
32
</li>
<li>
33
</li>
<li>
34
</li>
<li>
35
</li>
<li>
36
</li>
<li>
37
</li>
</ul>
</section>
|
2)CSS设置
1
2
3
4
|
#container {
height
:
58px
;
margin
:
20px
20px
0
;
border
:
1px
solid
#000
; }
#container ul {
height
:
58px
;
display
: -webkit-box; }
#container ul li { -webkit-box-flex:
1
;
text-align
:
center
;
line-height
:
58px
;
border-right
:
1px
solid
#000
;}
#container ul li:last-child {
border-right
:
0
none
; }
|
流体布局demo:传送门
小结:flexbox的强大之处,不在于可对布局元素按比例分配宽高,而在于重新定义CSS盒模型,在使用百分比的同时,可以兼容边框、内填充等因素。