uniapp旋转横屏

设置全局屏幕方向

在pages.json中配置全局屏幕方向为自动旋转或强制横屏：

{
  "globalStyle": {
    "pageOrientation": "auto" // 自动旋转，或设置为 "landscape" 强制横屏
  }
}

单独页面横屏配置

若需特定页面横屏，在pages.json的页面配置中添加：

{
  "path": "pages/yourPage",
  "style": {
    "pageOrientation": "landscape" // 仅当前页面横屏
  }
}

动态切换横竖屏（仅App端）

通过plus.screen API动态控制方向（需真机调试）：

// 强制横屏
plus.screen.lockOrientation("landscape-primary");

// 强制竖屏
plus.screen.lockOrientation("portrait-primary");

// 解锁方向，恢复自动旋转
plus.screen.unlockOrientation();

注意事项

• H5端限制：浏览器通常禁止脚本控制屏幕方向，需用户手动旋转设备。
• 微信小程序：不支持动态切换，需在app.json中配置"pageOrientation": "landscape"。
• 兼容性检查：调用API前建议判断平台，避免非App端报错：

  if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
    // 执行App端API
  }

CSS适配横屏布局

横屏时可能需要调整样式，通过媒体查询适配：

@media screen and (orientation: landscape) {
  .container {
    flex-direction: row; /* 横向排列元素 */
  }
}