uni-app uni.getSystemInfoSync().windowHeight获取可使用窗口高度不一致

发布于 1周前 作者 eggper 来自 uni-app

uni-app uni.getSystemInfoSync().windowHeight获取可使用窗口高度不一致

详细问题描述

1、获取可使用窗口高度（uni.getSystemInfoSync().windowHeight）不一致。 2、HBuilderX 2.6.8版本和HBuilderX 2.6.5版本所获取的可使用窗口高度（uni.getSystemInfoSync().windowHeight）不一致。

重现步骤

重复打开关闭应用多次
[步骤]
重复打开关闭应用多次
[结果]
获取可使用窗口高度（uni.getSystemInfoSync().windowHeight）不一致
[期望]
uni.getSystemInfoSync().windowHeight获取到正确的可使用窗口高度

IDE运行环境说明

IDE版本号 HBuilderX 2.6.8版本和HBuilderX 2.6.5版本

uni-app运行环境说明

操作系统 Windows 10.0
运行端 APP
编译模式 uni-app模式v3下的nvue页面，vue页面也同样出现这个bug

测试结果(测试手机:华为荣耀8X)

HBuilderX 2.6.5版本

图片 图片 图片

HBuilderX 2.6.8版本

图片 图片 图片

可重现代码片段

<template>  
    <view :style="{'min-height':windowHeight+'px'}" style="background-color: #999999">  
        <text>重复关闭应用再打开应用，多次后出现:</text>  
        <text>HBuilderX 2.6.8版本获取</text>  
        <text>可使用窗口高度:{{windowHeight}}</text>  
        <text>会出现滚动条</text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                windowHeight: 500  
            }  
        },  
        onShow() {  
            this.windowHeight = uni.getSystemInfoSync().windowHeight;  
            console.log("HBuilderX 2.6.8版本获取可使用窗口高度:" + uni.getSystemInfoSync().windowHeight)  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

Harmonyos Next教程
14 回复

求回答呀，难道只有我出现这样的bug吗？你们不会吗？


求官方回复一下呀，这个是经常会使用的API。

测试了别的几种不同的手机，就华为荣耀8X获取可使用窗口高度满屏的时候会出现滚动条，别的手机不会，获取可使用窗口高度不正确的情况可以设置延迟加载解决，设置延迟加载后获取到的值都正确。

只有这个荣耀8X表现不正常吗？这个荣耀8X系统版本是多少

华为荣耀8X,型号JSN-AL00,版本10.0.0.157(C00E67R1P4)。我就只测试过几种手机:小米，苹果，魅族。

改在 onReady 获取高度，onShow、onLoad 等生命周期页面未完全初始化完毕，获取到的窗口高度值并非最新

为什么还是没有解决？

2023了 还是有问题啊 https://ask.dcloud.net.cn/question/183123

2023年了又出现这个问题

2024年这个问题还在，官方也不管了

要延迟获取！！！！

加了3s延迟 不起作用啊

同问，越用越发现，就像一个半成品，问题多

在uni-app开发中，uni.getSystemInfoSync().windowHeight 用于获取系统窗口的高度，但在不同设备和不同情境下（如横竖屏切换、刘海屏、状态栏高度变化等），获取到的值可能会不一致。为了确保获取到准确的可使用窗口高度，通常我们需要结合其他API和系统信息来综合判断。

以下是一个示例代码，用于获取和调整页面布局以适应不同的窗口高度：

// 获取系统信息
const systemInfo = uni.getSystemInfoSync();

// 获取窗口高度，这里考虑了状态栏高度
let windowHeight = systemInfo.windowHeight;
let statusBarHeight = systemInfo.statusBarHeight;

// 对于iOS设备，特别是刘海屏，需要考虑safeArea信息
if (systemInfo.platform === 'ios') {
    const safeArea = uni.getSystemInfoSync().safeArea;
    // 如果存在safeArea，则使用其bottom值调整窗口高度
    if (safeArea.bottom > 0) {
        windowHeight = safeArea.bottom + systemInfo.windowHeight - statusBarHeight;
    }
}

// 输出窗口高度信息，用于调试
console.log('系统窗口高度（含状态栏）:', systemInfo.windowHeight);
console.log('状态栏高度:', statusBarHeight);
console.log('调整后的窗口高度:', windowHeight);

// 在页面中使用调整后的窗口高度
// 假设我们有一个容器需要占满整个可视区域
export default {
    data() {
        return {
            containerStyle: {}
        };
    },
    mounted() {
        this.containerStyle.height = `${windowHeight}px`;
    },
    methods: {
        // 监听窗口大小变化（如横竖屏切换）
        onWindowResize() {
            const newSystemInfo = uni.getSystemInfoSync();
            let newWindowHeight = newSystemInfo.windowHeight;
            let newStatusBarHeight = newSystemInfo.statusBarHeight;
            
            if (newSystemInfo.platform === 'ios') {
                const newSafeArea = newSystemInfo.safeArea;
                if (newSafeArea.bottom > 0) {
                    newWindowHeight = newSafeArea.bottom + newSystemInfo.windowHeight - newStatusBarHeight;
                }
            }
            
            this.containerStyle.height = `${newWindowHeight}px`;
        }
    },
    onReady() {
        uni.onWindowResize(this.onWindowResize);
    },
    onUnload() {
        uni.offWindowResize(this.onWindowResize);
    }
};

上述代码首先获取系统信息，然后根据设备类型（特别是iOS设备）调整窗口高度。同时，监听窗口大小变化事件，以确保在横竖屏切换或其他导致窗口大小变化的情况下，能够动态调整布局。这样处理可以确保在不同设备和情境下，页面布局都能正确适应窗口高度。

回到顶部