前言

安全区域与边界是iOS11 新增特性。

安全区域

• 安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。
• Webkit 为此增加了相应的CSS 函数，用于获取安全区域边界值。

安全区域边界

安全区域边界有4个预定义变量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

获取安全区域边界的方法

env(safe-area-inset-bottom)

最佳实践

page {
    padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx); /* 兼容 iOS < 11.2 */
    padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx); /* 兼容 iOS >= 11.2 */
}
/* 兼容老的连constant都不支持的ios机型 */
@supports not(constant(safe-area-inset-bottom)){
  page {
    padding-bottom: 150rpx;
  }
}

• constant在前，env在后

参考

https://blog.csdn.net/qq_38111015/article/details/113940880
https://www.cnblogs.com/djjlovedjj/p/14686684.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports