uniapp横竖屏切换尺寸不对是什么原因？

在使用uniapp开发APP时，横竖屏切换后页面尺寸显示异常，元素布局错乱或留白。已尝试在pages.json配置"orientation": [“portrait”,“landscape”]开启横竖屏支持，但切换后获取的屏幕宽高值没有实时更新。请问如何正确适配横竖屏尺寸变化？需要监听哪个事件或调用什么API？

2 回复

uniapp横竖屏切换时尺寸异常，通常是因为页面未适配响应式布局。检查是否使用了固定尺寸单位（如px），建议改用rpx或vw/vh。同时确认在pages.json中正确配置了"pageOrientation": "auto"，并检查CSS中媒体查询是否生效。


在UniApp中，横竖屏切换时尺寸显示异常，通常由以下原因导致：

  1. 页面未配置屏幕方向支持
    在 pages.json 中需声明页面支持的屏幕方向：

    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "orientation": ["portrait", "landscape"] // 支持竖屏和横屏
      }
    }
  ]
}

  2. CSS单位或布局未适配响应式

    • 避免使用固定尺寸（如 px），推荐使用 %、vw/vh 或 rpx（UniApp自适应单位）。
    • 使用 Flex 布局或媒体查询适配不同方向：
    /* 示例：横屏时调整布局 */
[@media](/user/media) (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

  3. 生命周期未处理尺寸变化
    通过 onResize 监听屏幕变化（仅部分平台支持），或使用 uni.onWindowResize：

    // 在页面中监听
onReady() {
  uni.onWindowResize((res) => {
    console.log('窗口尺寸变化:', res.size);
    // 动态调整布局
  });
}

  4. App端配置缺失

    • Android：在 manifest.json 的 "app-plus" 节点配置 "orientation" 数组。
    • iOS：需在 Xcode 中勾选支持的方向。

  5. 组件/API兼容性问题
    部分组件（如地图、视频）可能需要单独处理横竖屏逻辑，需查阅对应文档。

建议排查步骤：

  1. 检查页面配置是否正确支持目标方向。
  2. 使用响应式单位（如 rpx）重写样式。
  3. 在真机测试（模拟器可能无法真实反映尺寸问题）。

通过以上调整，通常可解决尺寸适配异常问题。

回到顶部