uniapp旋转横屏

设置全局屏幕方向

在pages.json中配置全局屏幕方向，添加"orientation": ["landscape"]。这种方式会让所有页面强制横屏显示。

{
  "globalStyle": {
    "orientation": ["landscape"]
  }
}

单页面横屏配置

在特定页面的配置中添加横屏设置，仅影响当前页面。在pages.json中找到对应页面配置，加入"orientation": "landscape"。

{
  "path": "pages/yourPage",
  "style": {
    "orientation": "landscape"
  }
}

动态切换屏幕方向

通过调用plus.screen.lockOrientation方法实现运行时动态切换。需要在页面生命周期中调用，例如onLoad或按钮事件。

// 锁定横屏
plus.screen.lockOrientation('landscape-primary');

// 解锁恢复默认
plus.screen.unlockOrientation();

处理CSS适配问题

横屏布局需要调整样式适配。使用uni.getSystemInfoSync()获取屏幕宽高，并通过CSS媒体查询或动态样式处理布局变化。

/* 横屏样式适配 */
@media screen and (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

注意事项

Android平台可能需要额外配置manifest.json，添加以下内容确保横屏生效：

{
  "plus": {
    "screen": {
      "orientation": ["landscape"]
    }
  }
}

iOS平台需确保Xcode项目设置中勾选横屏方向，在manifest.json中配置支持的方向：

{
  "plus": {
    "distribute": {
      "ios": {
        "orientation": [
          "landscape"
        ]
      }
    }
  }
}