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

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

2024-05-20 14:05:12 前端知识 前端哥 732 371 我要收藏

原来的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`,
      );
    }
  }
}
  1. 使用
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来判断环境再去设置样式的复杂操作。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8935.html
标签
android
评论
会员中心 联系我 留言建议 回顶部
复制成功!