uni-app uni.getSystemInfo 获取高度不准

uni-app uni.getSystemInfo 获取高度不准

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
4.87

手机系统：
HarmonyOS NEXT

手机系统版本号：
HarmonyOS 6.0.0

手机厂商：
华为

手机机型：
meta60

页面类型：
vue

vue版本：
vue3

打包方式：
云端

示例代码：

onReady() {
    this.$nextTick(function() {
        uni.getSystemInfo({
            success: res => {
                console.log("res.windowHeight:" + res.windowHeight);
                const query = uni.createSelectorQuery().in(this);
                query.select('.header-bg').boundingClientRect(data => {
                    console.log("res.windowHeight:" + res.windowHeight);
                    console.log("data.height:" + data.height);
                    _this.contentsHeight = res.windowHeight - data.height - 12;
                    _this.boxHeight = res.windowHeight - data.height - 12;
                    console.log("_this.contentsHeight:" + _this.contentsHeight);
                }).exec();
            }
        });
    });
},

操作步骤：

  1. 在两个tab页面的onReady或mounted方法内通过uni.getSystemInfo获取windowHeight的值。
  2. 一个tab页面是home.vue,该页面为登录成功后通过uni.switchTab方法跳转，
  3. 一个tab页面为mytab.vue,该页面通过真机页面点击底部tab按钮跳转
  4. home页面打印的windowHeight值为837，mytab页面打印的windowHeight值为759。

预期结果：

期望两个页面的windowHeight值为一致

实际结果：

home页面打印的windowHeight值为837，mytab页面打印的windowHeight值为759。

bug描述：

  1. 在两个tab页面的onReady或mounted方法内通过uni.getSystemInfo获取windowHeight的值。
  2. 一个tab页面是home.vue,该页面为登录成功后通过uni.switchTab方法跳转，
  3. 一个tab页面为mytab.vue,该页面通过真机页面点击底部tab按钮跳转
  4. home页面打印的windowHeight值为837，mytab页面打印的windowHeight值为759。


更多关于uni-app uni.getSystemInfo 获取高度不准的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

该bug反馈内容基本完整，提供了标题、描述、代码示例、复现步骤等信息，但缺少关键细节：未说明tabbar是否为自定义样式、manifest.json中tabbar配置及页面是否有自定义导航栏。代码示例可直接运行，但.header-bg元素结构未提供，可能影响复现判断。
此问题不成立，属于概念理解偏差。根据知识库，windowHeight表示可使用窗口高度，其值受当前页面UI元素影响：

屏幕高度 = 原生NavigationBar高度 + 可使用窗口高度(windowHeight) + 原生TabBar高度
windowHeight不包含NavigationBar和TabBar高度
不同页面若存在导航栏/状态栏差异（如home.vue可能包含额外导航元素），会导致windowHeight值不同

实际结果符合设计预期：home.vue通过switchTab跳转时可能已渲染完整UI框架（含自定义导航栏），而mytab.vue作为标准tab页面计算方式不同。建议：

检查两页面manifest.json中"app-plus"->"navigationBar"配置差异
使用safeAreaInsets替代直接计算高度
参考tabbar高度说明理解不同跳转方式下的UI渲染时机

非bug而是正常行为，无需修复。开发者应通过const { windowHeight, statusBarHeight } = uni.getSystemInfoSync()结合安全区域计算可用高度，而非假设所有页面windowHeight一致。 内容为 AI 生成，仅供参考

更多关于uni-app uni.getSystemInfo 获取高度不准的实战教程也可以访问 https://www.itying.com/category-93-b0.html


两个页面结构一样 页面头部都为自定义导航

提供复现工程，我定义了三个页面 ，页面中打印 windowHeight，在有 tabbar 和没有 tabbar 的页面里 打印数据符合预期。

根据你的描述，这是典型的页面渲染时机差异导致的系统信息获取问题。

核心原因分析：

  1. uni.switchTab 跳转的特殊性：当你通过 uni.switchTab 跳转到首页时，应用实际上已经完成了全局的初始化（包括状态栏、导航栏等系统UI的布局计算）。此时在 onReady 中调用 uni.getSystemInfo 获取的 windowHeight 是最终稳定值。

  2. 直接点击 TabBar 切换：当应用已启动，你通过点击底部 TabBar 切换到 mytab.vue 时，该页面的 onReady 可能在某些情况下（特别是页面复杂或渲染稍慢时）会提前触发。此时系统UI（如底部TabBar）的布局可能尚未完全应用到页面渲染管线中，导致 windowHeight 包含了TabBar的高度，因此值更小（759 vs 837，差值正好约是TabBar高度）。

解决方案（按推荐度排序）：

方案一：使用 onLoad 替代 onReady（推荐） 将获取系统信息的代码从 onReady 移至 onLoad 生命周期。onLoad 触发更早且稳定，能确保在页面实例化后立即获取系统信息，避免渲染波动影响。

onLoad() {
    uni.getSystemInfo({
        success: res => {
            this.systemInfo = res;
            // 后续操作
        }
    });
}

方案二：添加延迟获取 如果 onLoad 仍不稳定（极少情况），可添加一个最小延迟确保布局完成。

onReady() {
    setTimeout(() => {
        uni.getSystemInfo({
            success: res => {
                console.log("稳定的 windowHeight:", res.windowHeight);
            }
        });
    }, 50);
}

方案三：使用 uni.getWindowInfo()（HBuilderX 3.6.5+） 新版 API 专为窗口信息设计，数据更精准。

const windowInfo = uni.getWindowInfo();
console.log("windowHeight:", windowInfo.windowHeight);

方案四：统一使用 uni.getSystemInfoSync() 同步 API 能避免异步回调时机问题，确保获取的是调用时刻的系统信息。

onReady() {
    const res = uni.getSystemInfoSync();
    console.log("windowHeight:", res.windowHeight);
}
回到顶部