前言
安全区域与边界是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：安全区域距离底部边界距离
文章来源：https://www.toymoban.com/news/detail-418949.html
获取安全区域边界的方法
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在后
参考
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文章来源地址https://www.toymoban.com/news/detail-418949.html
到了这里，关于css 安全区域 safe-area-inset-的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
