前言

安全区域与边界是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在后

参考

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

最后

以上就是默默香烟为你收集整理的css 安全区域 safe-area-inset-前言安全区域安全区域边界获取安全区域边界的方法最佳实践参考的全部内容，希望文章能够帮你解决css 安全区域 safe-area-inset-前言安全区域安全区域边界获取安全区域边界的方法最佳实践参考所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。