uniapp打包app如何设置横屏模式

在uniapp中打包APP时，如何强制设置为横屏显示？我已经尝试在manifest.json里配置"screenOrientation": “landscape”，但部分页面还是会自动变成竖屏。请问除了修改manifest，还需要在其他地方进行设置吗？比如页面代码或全局配置中是否需要额外处理？另外，如果只想让特定页面横屏，其余保持竖屏，该如何实现？

2 回复

在pages.json中，找到对应页面或全局配置，添加"pageOrientation": "landscape"即可强制横屏。


在 UniApp 中设置横屏模式，可以通过以下步骤实现：

  1. 配置 pages.json 文件：
    在 globalStyle 或具体页面的 style 中设置 "pageOrientation": "auto" 或 "landscape"，使页面支持横屏。

    {
  "globalStyle": {
    "pageOrientation": "auto"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "landscape" // 仅该页面横屏
      }
    }
  ]
}

  2. 修改应用原生配置（关键步骤）：

    • Android：在 manifest.json 的 "app-plus" -> "distribute" -> "android" 中添加 "screenOrientation" 字段：
      {
  "app-plus": {
    "distribute": {
      "android": {
        "screenOrientation": ["landscape-primary", "landscape-secondary"]
      }
    }
  }
}
    • iOS：在 manifest.json 的 "app-plus" -> "distribute" -> "ios" 中设置 "screenOrientation"：
      {
  "app-plus": {
    "distribute": {
      "ios": {
        "screenOrientation": ["landscape"]
      }
    }
  }
}

  3. 重新打包：
    修改配置后，通过 HBuilderX 重新打包生成 App，横屏设置才会生效。

注意事项：

  • 横屏设置需同时配置页面方向和原生平台参数。
  • 若仅部分页面需横屏，建议在页面样式单独设置，避免全局影响。
  • 测试时请使用真机，模拟器可能无法完全模拟横屏行为。

通过以上配置，即可实现 UniApp 打包 App 的横屏模式。

回到顶部