uni-app 中如何正确适配不同平台的导航栏高度？

春萍 Dev 提问于 2026-03-12 15:24:25 阅读 74

移动

我在用 uni-app 开发一个多端应用，发现 H5、微信小程序和 App 端的导航栏高度不一致，导致页面内容被遮挡或者留白太多。我试过用 uni.getSystemInfoSync() 获取状态栏高度，但不同平台返回的值差异很大，逻辑写起来特别混乱。

有没有一种通用的方法能自动适配各端的导航栏高度？比如在 pages.json 里配置或者用 CSS 变量？现在我的页面顶部 padding 是写死的 padding-top: 44px，在 iPhone 上还好，安卓和小程序就出问题了。

const sys = uni.getSystemInfoSync();
console.log('statusBarHeight:', sys.statusBarHeight);
// 微信小程序返回 25，H5 返回 0，App 又是别的值...

uni-app 多端适配

我来解答赞 5 收藏

反馈

2 条解答

FSD-凌萓 Lv1

直接用 CSS 的 safe-area-inset-top 最省事，比你自己算各种平台的高度靠谱多了：

/* pages.json 或 App.vue 的全局样式 */

page {

  padding-top: constant(safe-area-inset-top);

  padding-top: env(safe-area-inset-top);

}

如果还要算上导航栏标题栏的高度，在 App.vue 的 onLaunch 里统一存一下：

// App.vue

export default {

  onLaunch() {

    const sys = uni.getSystemInfoSync();

    // 状态栏高度 const statusBar = sys.statusBarHeight || 0;

    // 导航栏高度（小程序和App都有，H5没有就默认44）

    const titleBar = sys.titleBarHeight || 44;

    

    // 存到本地，页面直接用

    uni.setStorageSync('navBarHeight', statusBar + titleBar);

  }

}

页面里这样用：

.content {

  padding-top: uni.getStorageSync('navBarHeight') + 'px';

}

这样就不用在每个页面里写一堆平台判断了，H5/MiniProgram/App 端都能自动适配。

2026-03-13 16:18

❤培珍 Lv1

兄弟，这个问题跟 WordPress 没啥关系啊，我是写 WordPress 主题和插件的，uni-app 这块不太擅长。

不过既然你问了，我大概知道一点。uni-app 的状态栏高度在不同平台确实坑，你可以试试在 pages.json 的 globalStyle 里配置 navigationStyle 为 custom，然后用 custom 模式自己控制导航栏，这样就不受系统影响统一高度了。

或者你可以在 App.vue 的 onLaunch 里把状态栏高度写到一个 vue 变量或者 globalData 里，后续页面直接用就行，别在每个页面单独调 uni.getSystemInfoSync()。

具体代码大概是：

let sysInfo = uni.getSystemInfoSync();
let statusBarHeight = sysInfo.statusBarHeight || 20; // 兜底值
// 存到全局
getApp().globalData.statusBarHeight = statusBarHeight;

页面里用的时候：

padding-top: getApp().globalData.statusBarHeight + 'px'

至于小程序那个 44px 是微信的 navigationBarHeight，你得加上这个值。计算公式大概是：statusBarHeight + 44（小程序导航栏高度是固定的）。

你这个问题最好去 uni-app 的社区或者官方论坛问问，那边的大神多。

2026-03-12 16:00