iPhoneX ‘安全区域’ 适配 技能get

献上一张iPhone X的布局图

• 绿色区为安全区域
  

通过viewport的属性 viewport-fit（ios的Safari还不支持）

viewport-fit 是专门适配iPhone X之类的有刘海而且底部圆角的屏幕
viewport-fit有以下属性：

• viewport-fit : auto 该值不会影响初始布局视区，并且整个网页都可以查看。
• viewport-fit : cover 视区按比例缩放，以适应显示中内接的最大矩形。显示在安全区域内
• viewport-fit : contain 视区被缩放以填充设备显示。强烈建议使用安全区域插入变量，以确保重要内容不会超出显示范围。
  auto 和 contain 效果一样

ios新增两个css函数 env constant 用于设定安全区域与边界的距离

• safe-area-inset-top
• safe-area-inset-bottom
• safe-area-inset-left
• safe-area-inset-right
  必须在添加了viewport-fit属性后才生效

.content {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}