小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
css中的处理
项目开发中，基于ios的H5、小程序、APP都不得不考虑的就是iPhone的底部黑条了，手机端都会有tabbar底部菜单，如果不针对底部的安全区域做出处理的话，贴底会被底部黑条遮挡，直接空出一部分的空间的话，又会因为不同的型号而产生不同的底部安全区域高度，所以就需要一个合适的处理方法了。
如果只是需要空出这一部分的区域的话，那么通过uni-app自带的处理方法在css中加入指定的代码即可完成处理
page{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
如上配置之后，框架会自动识别设备型号，并配置对应的安全区域高度，无安全区域时为0，不用担心破版。
获取安全区域高度
上述做法只能被动的接受框架的处理，而有时需要拿到实际的安全区域高度方便动态高度的处理。
如，某个H5界面包含头部、内容区、tabbar三个部分，中间内容区高度由内容撑高，如果不能完全撑高则动态高度，超过屏幕高度则允许滚动。
这时，如果需要计算中间的高度，头部和tabbar是自定义的，固定高度可以直接用于计算，但是是否包含安全区域，安全区域的高度是未知的，所以需要实时获取。
uni.getSysteminfo({
success: res => {
let safeArea = res.safeAreaInsets.bottom;
}
})
该APi返回一个对象，包含 top right bottom left width height，其中bottom为安全区域高度
对应的兼容情况如下，uni-app的版本2.5.3+使用safeAreaInsets值
| safeArea | 在竖屏正方向下的安全区域 | App、H5、微信小程序 |
|---|---|---|
| safeAreaInsets | 在竖屏正方向下的安全区域插入位置（2.5.3+） | App、H5、微信小程序 |
