uni-app强制横屏下获取res.windowWidth，res.windowHeight不准确

uni-app强制横屏下获取res.windowWidth，res.windowHeight不准确

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

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
3.2.3

手机系统：
Android

手机系统版本号：
Android 10

手机厂商：
华为

手机机型：
huawei P30

页面类型：
vue

打包方式：
云端

项目创建方式：
HBuilderX

bug描述：

onLaunch(){
plus.screen.lockOrientation('portrait-primary');
}
在app里面有一页需要横屏，所以在具体的pages里面
onShow(){
plus.screen.lockOrientation('landscape-primary');
}
onReady(){
const res = uni.getSystemInfoSync();
console.log("{onShow}windowWidth:"+res.windowWidth+"  windowHeight="+res.windowHeight);
}
发现获取得到的res.windowWidth，res.windowHeight经常都是按照竖屏返回，偶尔按照横屏返回？对onReady加了timeout来获取，情况一样无改观。
这种情况应该怎么解决？

更多关于uni-app强制横屏下获取res.windowWidth，res.windowHeight不准确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app强制横屏下获取res.windowWidth，res.windowHeight不准确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在强制横屏后立即获取窗口尺寸，确实可能遇到系统未完成布局调整的情况。建议在 onShow 横屏后，监听 onResize 事件来获取准确的窗口尺寸。

解决方案：

  1. 延迟获取：在 onShow 中设置横屏后，使用 setTimeout 延迟获取尺寸，但延迟时间需根据设备性能调整，不够稳定。

  2. 推荐使用 onResize 监听：在 onShow 中设置横屏，并监听窗口尺寸变化事件，在回调中获取尺寸。这是更可靠的方式。

代码示例：

onShow() {
  plus.screen.lockOrientation('landscape-primary');
  // 监听窗口尺寸变化
  uni.onWindowResize((res) => {
    console.log("windowWidth:", res.size.windowWidth, "windowHeight:", res.size.windowHeight);
    // 获取到准确尺寸后，可移除监听避免重复触发
    uni.offWindowResize();
  });
}
回到顶部