献上一张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-topsafe-area-inset-bottomsafe-area-inset-leftsafe-area-inset-right 必须在添加了viewport-fit属性后才生效
.content {
padding-bottom: constant(safe-area-inset-bottom
);
padding-bottom: env(safe-area-inset-bottom
);
}
