一、属性值：
safe-area-inset-top安全区域距离顶部边界的距离（一般是手机状态栏（无线信号，电量标识所处位置）距离屏幕顶部的距离）
safe-area-inset-bottom
//以下两个属性值是 手机横屏时，左右两边的安全距离
safe-area-inset-left
safe-area-inset-right
二、说明：
- safe-area-inset-left ,safe-area-right 一般情况下是 0
2)safe-area-inset-top 在刘海全屏的时候 top 为 44px,
3)safe-area-inset-bottom 在刘海屏全屏的时候bottm值为34px
三、css 支持函数env() 和constant()
ps: env() IOS >= 11.2支持
constant() IOS< 11.2支持
兼容前后版本代码
//注意顺序不能反
padding-top:constant(safe-area-inset-top);
padding-top:env(safe-area-inset-top);
//css 判断语法支持性
@supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) { body.iphonex { @include iphonex-css; } }
四、前置条件
env 和 constant 只有在 viewport-fit=cover 时候才能生效, 上面使用的safari 的控制台可以检测模拟器中网页开启web inspector.
