什么时候需要适配状态栏
无法全屏的竖屏移动端h5项目，无需考虑状态栏以及刘海屏问题。因为无法全屏的移动端h5项目，通常都是使用手机浏览器打开，而手机浏览器没法全屏
刘海屏无需考虑状态栏，只需考虑刘海安全区高度。因为状态栏就在刘海区中。
非刘海屏（包含普通屏幕以及各种异形屏）需要考虑状态栏高度。
只有混合开发且支持web-view全屏的移动端h5项目，需要考虑适配状态栏以及刘海屏适配问题。
无法全屏，但支持横屏的移动端h5项目，需要考虑左右安全区适配
个人总结的混合开发方式：
原生混合开发： web-view套在 android app 或 ios app 中。这种方式直接让 android/ios开发通过编程方式，告知状态栏或者说刘海的高度即可
小程序原生开发： 如：微信小程序。他们通常都提供了专门的API，来获取状态栏高度。
uni app开发： 也有专门的API，来获取状态栏高度
什么时候需要考虑底部安全区和侧边安全区适配
移动端h5项目通常都需要考虑底部安全区和侧边安全适配，因为移动端浏览器通常是可以显示到屏幕的最底部，以及支持横竖屏切换的
什么是安全区? 安全区的概念从什么时候开始的？
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响. 绿色区域就是安全区
安全区的概念从iPhone X时代开始. 从iPhone开始发行刘海屏开始,安全区的概念和解决方案也就应运而生。
如何适配安全区?
要适配安全区，那先得知道安全区的宽度或高度
获取安全区的宽度/高度
iOS11 新增特性，Webkit 的一个 CSS 函数，用于向 CSS 插入用户代理定义的变量设定安全区域与边界的距离，有四个预定义的变量：
- safe-area-inset-left：安全区域距离左边边界距离
- safe-area-inset-right：安全区域距离右边边界距离
- safe-area-inset-top：安全区域距离顶部边界距离
- safe-area-inset-bottom：安全区域距离底部边界距离
在css中使用这些变量
padding-bottom: env(safe-area-inset-bottom);
注意事项
env()必须配合 viewport-fit=cover 使用!
啥意思？就是要将 viewport-fit 设置为 cover (h5需要自己手动设置，小程序中viewport-fit默认为cover)
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
注意兼容写法
padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
android的安全区
安卓的安全区就百花齐放了。
【移动端适配二】H5移动端适配屏幕安全区（ios和android）_h5页面在安卓手机适配安全区域-CSDN博客
如何解决移动端的安全区域为0的问题 - 小茶馆里的蚊子 - 博客园 (cnblogs.com)
全面屏安全区域布局问题（刘海屏） - 知乎 (zhihu.com)
通过JavaScript获取刘海屏安全区域高度的方式 - 知乎 (zhihu.com)
微信小程序安全区
微信小程序中安全区域计算和适配 | 微信开放社区 (qq.com)
自定义导航栏高度精确适配方案 | 微信开放社区 (qq.com)
vant组件的安全区
NavBar 导航栏 - Vant Weapp (gitee.io)
Tabbar 标签栏 - Vant Weapp (gitee.io)
uniapp 安全区
uni-app:iPhone的底部安全区域 - 掘金 (juejin.cn)
uniapp 底部安全区域适配 - 掘金 (juejin.cn)
uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置 - DCloud问答
适配状态栏
无法全屏的移动端h5项目，无需考虑状态栏以及刘海屏问题。因为无法全屏的h5项目，通常都是使用手机浏览器打开，而手机浏览器就没法全屏
刘海屏无需考虑状态栏，只需考虑刘海安全区高度。因为状态栏就在刘海区中。
非刘海屏需要考虑状态栏高度。
只有混合开发的移动端h5项目，需要考虑适配状态栏以及刘海屏问题。因为这类项目的web-view通常都是全屏状态。
个人总结的混合开发方式：
原生混合开发： web-view套在 android app 或 ios app 中。这种方式直接让 android/ios开发告知状态栏或者说刘海的高度
小程序原生开发： 如：微信小程序。他们通常都提供了专门的API，来获取状态栏高度。
uni app开发： 也有专门的API，来获取状态栏高度
移动端：js如何获取当前手机的状态栏高度_js获取手机状态栏高度-CSDN博客
【移动端适配二】H5移动端适配屏幕安全区（ios和android）-CSDN博客
【H5在混合开发中的兼容问题】如何同时适配：ios的安全区域/沉浸式开发下的安卓状态栏_h5沉浸式状态栏-CSDN博客
h5适配ios顶部和底部安全区域的问题_safe-area-inset-top-CSDN博客
H5完美适配刘海屏和状态栏高度的全机型解决方案攻略 - 掘金 (juejin.cn)
一个API处理Android安全距离 - 掘金 (juejin.cn)
js 判断手机是否全面屏 - 陌路y - 博客园 (cnblogs.com)
