H5页面适配 iPhoneX

大家都知道，iphoneX，屏幕顶部都有一个齐刘海，iPhoneX 取消了物理按键，改成底部小黑条，如果不做适配，这些地方就会被遮挡，因此本文讲述下齐刘海与底部小黑条的适配方法。

几个新概念

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图所示：

image.png

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 ()，目前还不可用。

适配例子

第一步：设置网页在可视窗口的布局方式

第二步：页面主体内容限定在安全区域内

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);
  }
}