IOS 11
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-bottom);
IOS 11.2beta及其后
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
兼容写法
padding-top: 10px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
与calc合用
padding-top: 10px;
padding-top: calc(10px + constant(safe-area-inset-top));
padding-top: calc(10px + env(safe-area-inset-top));
使用sass@minix
// calc要使用带单位的值 不能使用0计算
@minix x-padding-top($val:0px) {
padding-top: $val;
padding-top: calc($val + constant(safe-area-inset-top));
padding-top: calc($val + env(safe-area-inset-top));
}
文档参考1: 微信开发社区
文档参考2：苹果官方文档
