大家都知道,iphoneX,屏幕顶部都有一个齐刘海,iPhoneX 取消了物理按键,改成底部小黑条,如果不做适配,这些地方就会被遮挡,因此本文讲述下齐刘海与底部小黑条的适配方法。
几个新概念
安全区域
安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图所示:
viewport-fit
iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:
- contain: 可视窗口完全包含网页内容(左图)
- cover:网页内容完全覆盖可视窗口(右图)
- auto:默认值,跟 contain 表现一致
constant 函数
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量(单位是px):
- safe-area-inset-left:安全区域距离左边界距离
- safe-area-inset-right:安全区域距离右边界距离
- safe-area-inset-top:安全区域距离顶部边界距离
- safe-area-inset-bottom:安全区域距离底部边界距离
注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,不然constant 函数是不起作用的,这是适配的必要条件。
官方文档中提到将来 env()要替换 constant (),目前还不可用。
适配例子
第一步:设置网页在可视窗口的布局方式
<meta name='viewport' content="width=device-width, viewport-fit=cover" />
第二步:页面主体内容限定在安全区域内
body {
/* 适配齐刘海*/
padding-top: constant(safe-area-inset-top);
/* 适配底部黑条*/
padding-bottom: constant(safe-area-inset-bottom);
}
第三步:fixed 元素的适配
- bottom 不是0的情况
// bottom 不是0的情况
.fixed {
bottom: calc(50px(原来的bottom值) + constant(safe-area-inset-bottom));
}
- 吸底的情况(bottom=0)
/* 方法1 :设置内边距 扩展高度*/
/* 这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。*/
.fix {
padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接扩展高度*/
.fix {
height: calc(60px(原来的高度值) + constant(safe-area-inset-bottom));
}
/* 方法2 :在元素下面用一个空div填充, 但是背景色要一致 */
.blank {
position: fixed;
bottom: 0;
height: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}
/* 吸底元素样式 */
.fix {
margin-bottom: constant(safe-area-inset-bottom);
}
最后: 使用@supports
因为只有有齐刘海和底部黑条的机型才需要适配样式,可以用@support配合使用:
@supports (bottom: constant(safe-area-inset-bottom)) {
body {
padding-bottom: constant(safe-area-inset-bottom);
}
}