css 安全区域 safe-area-inset-

前言

安全区域与边界是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机型 */@supportsnot(constant(safe-area-inset-bottom)){page{padding-bottom: 150rpx;}}

• constant在前，env在后

参考

safe-area-inset-bottom iphone
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