workspace/code/docusaurus/docs/coding/uniapp/02-h5低版本浏览器适配.md

白屏问题

环境：

• 浏览器：Chrome56
• Unibest：快速开发框架，官网：https://unibest.tech/

出现白屏参考上面的方案。

使用的是 Vscode 模板的话，直接参考

使用的是 Hbuilderx 模板的话，在根目录下添加vite.config.js文件

import Uni from '@dcloudio/vite-plugin-uni'
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    uni(),
    legacyPlugin({
      // 配置参考上面的 md 文件
    })
  ]
})

原生Tabbar遮挡

如果Uniapp原生的Tabbar会遮挡一部分内容，这是因为部分低版本浏览器可能不支持 env 计算函数，所以导致整个样式设置失效。

解决方案：

新建 /hooks/useSafeAreaBottom 文件夹

在该目录下新建 index.ts 和 index.css 文件，添加一下内容 index.css：

.safe-area-bottom {
  padding-bottom: 50px;
  padding-bottom: calc(50px + constant(safe-area-inset-bottom));
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}
// 设置为50px是因为Uniapp的tabber的高度固定为50px。

index.ts：

import './index.css'

export function useSafeAreaBottom(): {
  safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
  needSafeAreaBottom: boolean
} {
  const systemInfo = uni.getSystemInfoSync()

  const safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
    = systemInfo.safeAreaInsets ?? {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    }

  // ✅ 仅检测是否支持 env(safe-area-inset-bottom)
  const supportsEnv
    = typeof window !== 'undefined'
      && 'CSS' in window
      && typeof CSS.supports === 'function'
      && CSS.supports('padding-bottom', 'env(safe-area-inset-bottom)')

  const needSafeAreaBottom = !supportsEnv

  return {
    safeAreaInsets,
    needSafeAreaBottom,
  }
}

使用：

<template>
  <view
    :class="{ 'safe-area-bottom': needSafeAreaBottom }"
    :style="{ marginTop: safeAreaInsets.top + 'px' }"
  >
  </view>
</template>

<script lang="ts" setup>
import { useSafeAreaBottom } from '@/hooks/useSafeAreaBottom/index'

const { safeAreaInsets, needSafeAreaBottom } = useSafeAreaBottom()
</script>