uni-app 横屏小窗宽高不对 官方demo一样复现

没人回复吗

在使用 uni-app 开发应用时，如果你遇到横屏模式下小窗宽高不对的问题，可以尝试以下方法进行排查和解决。即使官方 demo 也复现了这个问题，以下步骤仍然适用：

1. 检查页面配置

确保在 pages.json 中正确配置了页面的横屏模式。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "landscape" // 设置为横屏
      }
    }
  ]
}

2. 使用 CSS 适配横屏

在横屏模式下，页面的宽高会发生变化。你可以通过 CSS 的 vw 和 vh 单位来适配横屏布局。例如：

.container {
  width: 100vw; /* 视口宽度 */
  height: 100vh; /* 视口高度 */
}

3. 监听屏幕方向变化

使用 uni.onWindowResize 监听屏幕方向变化，动态调整布局。例如：

uni.onWindowResize((res) => {
  console.log('窗口尺寸变化：', res.size);
  // 根据 res.size 动态调整布局
});

4. 检查小窗组件

如果问题出现在小窗组件（如 cover-view 或 cover-image）上，确保它们的样式和尺寸适配横屏模式。例如：

<cover-view class="small-window">小窗内容</cover-view>

.small-window {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}