献上一张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);
}
