uni-app在安卓平板下横屏获取uni.getSystemInfoSync().screenHeight和uni.getSystemInfoSync().screenWidth数据不多

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app在安卓平板下横屏获取uni.getSystemInfoSync().screenHeight和uni.getSystemInfoSync().screenWidth数据不多

示例代码：

onResize(){
let width = uni.getSystemInfoSync().screenWidth;
let height = uni.getSystemInfoSync().screenHeight;
console.error(width+"横竖屏"+height)
}

操作步骤：

新建一页页面，监听onResize方法，输出getSystemInfoSync

预期结果：

横屏：宽1000 高 600
竖屏：高1000 宽600

实际结果：

横屏：宽1000 高 1000
竖屏：高1000 宽600

bug描述：

当竖屏时获取的系统getSystemInfoSync为

{
"SDKVersion": "",
"appId": "",
"appLanguage": "zh-Hans",
"appName": "e",
"appVersion": "1.4.8",
"appVersionCode": 100,
"appWgtVersion": "1.4.8",
"brand": "honor",
"browserName": "chrome",
"browserVersion": "92.0.4515.105",
"deviceBrand": "honor",
"deviceId": "6BBC14BB416CFE3F7994564B5295A358",
"deviceModel": "KRJ2-W09",
"deviceOrientation": "portrait",
"devicePixelRatio": 2,
"deviceType": "pad",
"errMsg": "getSystemInfoSync:ok",
"language": "zh-CN",
"model": "KRJ2-W09",
"oaid": "",
"osAndroidAPILevel": 31,
"osLanguage": "zh-CN",
"osName": "android",
"osTheme": "light",
"osVersion": "12",
"pixelRatio": 2,
"platform": "android",
"romName": "HarmonyOS",
"romVersion": "",
"safeArea": {
"left": 0,
"right": 600,
"top": 0,
"bottom": 932,
"width": 600,
"height": 932
},
"safeAreaInsets": {
"top": 0,
"right": 0,
"bottom": 0,
"left": 0
},
"screenHeight": 1000,
"screenWidth": 600,
"statusBarHeight": 24,
"system": "Android 12",
"ua": "Mozilla/5.0 (Linux; Android 12; KRJ2-W09 Build/HONORKRJ2-W09; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/92.0.4515.105 Safari/537.36 uni-app (Immersed/24.0)",
"uniCompileVersion": "4.24",
"uniPlatform": "app",
"uniRuntimeVersion": "4.24",
"version": "1.9.9.82145",
"windowBottom": 0,
"windowHeight": 932,
"windowTop": 0,
"windowWidth": 600
}

横屏时为

```json
{
"SDKVersion": "",
"appId": "UNI2348E61",
"appLanguage": "zh-Hans",
"appName": "e会议",
"appVersion": "1.4.8",
"appVersionCode": 100,
"appWgtVersion": "1.4.8",
"brand": "honor",
"browserName": "chrome",
"browserVersion": "92.0.4515.105",
"deviceBrand": "honor",
"deviceId": "6BBC14BB416CFE3F7994564B5295A358",
"deviceModel": "KRJ2-W09",
"deviceOrientation": "portrait",
"devicePixelRatio": 2,
"deviceType": "pad",
"errMsg": "getSystemInfoSync:ok",
"language": "zh-CN",
"model": "KRJ2-W09",
"oaid": "",
"osAndroidAPILevel": 31,
"osLanguage": "zh-CN",
"osName": "android",
"osTheme": "light",
"osVersion": "12",
"pixelRatio": 2,
"platform": "android",
"romName": "HarmonyOS",
"romVersion": "",
"safeArea": {
"left": 0,
"right": 1000,
"top": 0,
"bottom": 932,
"width": 1000,
"height": 932
},
"safeAreaInsets": {
"top": 0,
"right": 0,
"bottom": 0,
"left": 0
},
"screenHeight": 1000,
"screenWidth": 1000,
"statusBarHeight": 24,
"system": "Android 12",
"ua": "Mozilla/5.0 (Linux; Android 12; KRJ2-W09 Build/HONORKRJ2-W09; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/92.0.4515.105 Safari/537.36 uni-app (Immersed/24.0)",
"uniCompileVersion": "4.24",
"uniPlatform": "app",
"uniRuntimeVersion": "4.24",
"version": "1.9.9.82145",
"windowBottom": 0,
"windowHeight": 932,
"windowTop": 0,
"windowWidth": 1000
}

对比之下：横竖屏的宽高对应不一，deviceOrientation也不对。

Harmonyos Next教程
1 回复

在uni-app中处理安卓平板横屏情况下的屏幕高度和宽度获取问题，通常涉及到设备方向的变化以及uni-app的系统信息获取API。在横屏模式下，uni.getSystemInfoSync().screenHeight 和 uni.getSystemInfoSync().screenWidth 的返回值可能会与预期不同，因为设备的自然方向（portrait或landscape）会影响这些值的返回。

为了确保在横屏模式下正确获取屏幕的高度和宽度，你可以结合使用 uni.getSystemInfoSync() 和监听设备方向变化的API，如 window.addEventListener('resize', callback) 或 uni.onWindowResize(callback)。不过，uni.onWindowResize 主要用于页面窗口尺寸变化，对于设备旋转引起的全局屏幕尺寸变化，我们更依赖系统信息API和方向判断。

以下是一个代码示例，展示了如何在uni-app中处理横屏情况下的屏幕尺寸获取：

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

// 初始屏幕宽度和高度
let screenWidth = systemInfo.screenWidth;
let screenHeight = systemInfo.screenHeight;

// 判断当前是否横屏
function isLandscape() {
    return screenWidth > screenHeight;
}

// 监听窗口尺寸变化（虽然主要用于页面，但可辅助调试）
uni.onWindowResize((res) => {
    console.log('Window resized:', res);
    // 注意：这里的res.size不包含screenWidth和screenHeight，仅用于页面布局变化
});

// 模拟设备旋转或初始化时判断
function updateScreenDimensions() {
    // 重新获取系统信息（实际应用中可能不需要每次都获取，根据需求调整）
    const newSystemInfo = uni.getSystemInfoSync();
    screenWidth = newSystemInfo.screenWidth;
    screenHeight = newSystemInfo.screenHeight;

    if (isLandscape()) {
        console.log('Landscape mode detected:');
        console.log('Screen Width:', screenWidth);
        console.log('Screen Height:', screenHeight);
    } else {
        console.log('Portrait mode detected (for reference):');
        console.log('Screen Width:', screenWidth);
        console.log('Screen Height:', screenHeight);
    }
}

// 初始化时调用
updateScreenDimensions();

// 注意：如果需要实时监听设备旋转，可能需要结合原生插件或平台特定的API，因为uni-app本身不直接提供设备旋转事件。

在这个例子中，我们通过比较 screenWidth 和 screenHeight 来判断设备是否处于横屏模式，并在横屏时输出正确的屏幕宽度和高度。注意，uni-app本身不直接提供设备旋转事件，如果需要实时监听，可能需要借助原生插件或平台特定的API。此外，对于性能考虑，不建议频繁调用 uni.getSystemInfoSync()，应根据实际需求调整调用频率。

回到顶部