话说在以前,做移动端的页面相对没那么多,就比较少去注意到iPhone X的适配
最近比较多H5活动页需要完成,自然而然碰上了X的种种问题。
iPhoneX的出现将手机的颜值带上了一个新的高度,它取消了物理按键,改成了底部的小黑条,但是这样的改动给开发者适配移动端又增加了难度。
1.安全区域
在iPhoneX发布后,现在国内外几乎新一代的都是具有边缘屏幕的手机。
这些手机和普通手机在外观上无外乎做了三个改动:圆角(corners
)、刘海(sensor housing
)和小黑条(Home Indicator
)。为了适配这些手机,安全区域这个概念变诞生了:
安全区域就是一个不受上面三个效果的可视窗口范围。
为了保证页面的显示效果,我们必须把页面限制在安全范围内,但是不影响整体效果。
所以这里遇到了一个问题,我在做全屏滚动的H5页面的时候,会出现,小黑条Home Indicator
附近没有页面内容,是白色的。这无疑就是一个bug。
注意底部
viewport-fit
viewport-fit
是专门为了适配iPhoneX而诞生的一个属性,它用于限制网页如何在安全区域内进行展示。
contain
: 可视窗口完全包含网页内容cover
:网页内容完全覆盖可视窗口
默认情况下或者设置为auto和contain效果相同。
env、constant
我们需要将顶部和底部合理的摆放在安全区域内,iOS11新增了两个CSS函数env
、constant
,用于设定安全区域与边界的距离。
函数内部可以是四个常量:
-area-inset-left
:安全区域距离左边边界距离
safe-area-inset-right
:安全区域距离右边边界距离
safe-area-inset-top
:安全区域距离顶部边界距离
safe-area-inset-bottom
:安全区域距离底部边界距离
注意:我们必须指定viweport-fit
后才能使用这两个函数:1
<meta name="viewport" content="viewport-fit=cover">
constant在iOS < 11.2的版本中生效,env在iOS >= 11.2的版本中生效,这意味着我们往往要同时设置他们,将页面限制在安全区域内:1
2
3
4body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
当使用底部固定导航栏时,我们要为他们设置padding值(fixed):1
2
3
4{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}