Uniapp+Vue3 移动端顶部安全距离

Jyywww1212026-01-20 10:15

前言

在进行UniApp移动端应用开发时，由于不同手机的顶部状态栏高度存在差异，因此需要进行动态适配以保障界面显示效果。若在H5端进行运行调试，由于无法直接获取设备状态栏高度，可以预先定义一个顶部安全距离变量，便于在开发过程中更直观地调整布局，优化预览体验。

在UniApp开发中，利用内置的 CSS 变量--status-bar-height可以便捷地适配不同设备的顶部状态栏。可以在 App.vue 中为全局页面的一级 view设置 padding-top，确保页面内容始终位于安全区域内，具体实现如下：

css 复制代码

<style>
/*每个页面公共css */
.container {
  padding-top: var(--status-bar-height, 88rpx);
}
</style>

本案例项目中所有页面的一级view都设置了container类名