【H5在混合开发中的兼容问题】如何同时适配：ios的安全区域/沉浸式开发下的安卓状态栏

原来的ios安全区域适配方案

在meta中设置： viewport-fit=cover 下面是一段在umi中的配置，仅举例，不使用umi的情况可以自己看加到具体位置。

metas: [
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover'
    },
  ],

代码中使用：（直接使用css样式）

 height: calc(100vh - constant(safe-area-inset-top)); /* 兼容 iOS<11.2 */
 height: calc(100vh - env(safe-area-inset-top)); /* 兼容iOS>= 11.2 */

那现在新的问题出现了，如果你们的安卓使用了沉浸式开发的主题，状态栏（工具栏）就和你的页面重合了

解决方案：

1. 安卓端添加状态栏高度到userAgent中，或者也可以通过bridge通信给到H5，最好是dp的单位，H5侧拿过来可以直接当做px使用。
2. 在初始化的代码中：

export default function initSetStyleProperty(): void {
  document.documentElement.style.setProperty(
    '--android-status-bar-height',
    `${0}px`,
  );

const { userAgent } = window.navigator;
if (/android/i.test(userAgent)) { // 这里是判断安卓环境的代码，可以使用
    const statusBarHeightRegex = /statusBarHeight=(\d+)/;
    const match = statusBarHeightRegex.exec(userAgent);
    if (match) {
      document.documentElement.style.setProperty(
        '--android-status-bar-height',
        `${match[1]}px`,
      );
    }
  }
}

2. 使用

height: calc(100vh - constant(safe-area-inset-top) - var(--android-status-bar-height));
height: calc(100vh - env(safe-area-inset-top) - var(--android-status-bar-height));

完美解决问题，避免使用js来判断环境再去设置样式的复杂操作。