iPhoneX适配
安全区域
安全区域是一个不受 圆角( corners
)、刘海( sensor housing
)和小黑条( HomeIndicator
)的可视窗口范围
为了保证页面的显示效果,我们必须把页面限制在安全范围内,但是不影响整体效果
viewport-fit
viewport-fit
是专门为了适配 iPhoneX
而诞生的一个属性,它用于限制网页如何在安全区域内进行展示。
contain
: 可视窗口完全包含网页内容
cover
:网页内容完全覆盖可视窗口
默认情况下或者设置为 auto
和 contain
效果相同。
env、constant
我们需要将顶部和底部合理的摆放在安全区域内, iOS11
新增了两个 CSS
函数 env、constant
,用于设定安全区域与边界的距离。
函数内部可以是四个常量:
-
safe-area-inset-left
:安全区域距离左边边界距离 -
safe-area-inset-right
:安全区域距离右边边界距离 -
safe-area-inset-top
:安全区域距离顶部边界距离 -
safe-area-inset-bottom
:安全区域距离底部边界距离
注意:我们必须指定 viweport-fit
后才能使用这两个函数:
<meta name="viewport" content="viewport-fit=cover">
constant
在 iOS<11.2
的版本中生效, env
在 iOS>=11.2
的版本中生效,这意味着我们往往要同时设置他们,将页面限制在安全区域内:
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
当使用底部固定导航栏时,我们要为他们设置 padding
值:
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}