uniapp 某个页面横屏显示

uniApp 是一种基于 Vue.js 的跨平台应用开发框架，它允许开发者构建一次，多端部署，包括 Web、H5、iOS 和 Android。如果你想让某个页面在 UniApp 应用中支持横屏显示，你可以按照以下步骤操作：

1. **设置页面配置**：
在 `pages` 目录下的对应页面 JSON 配置文件（如 `pageA.json`）中，添加 `"orientation"` 属性，设置为 `"both"` 或 `"landscape"`，这表示该页面既支持竖向也支持横向布局。

{
  "options": {
    "orientation": "both" // 或者 "landscape"
  },
  //...
}

2. **响应屏幕方向改变**：
使用 Vue 的 `beforeCreate` 或 `mounted` 生命周期钩子，在组件内监听设备的方向变化事件，以便动态调整样式或内容：

export default {
  beforeCreate() {
    uni.addEventListener('deviceorientationchange', this.onDeviceOrientationChange);
  },
  mounted() {
    this.onDeviceOrientationChange();
  },
  beforeDestroy() {
    uni.removeEventListener('deviceorientationchange', this.onDeviceOrientationChange);
  },
  
  methods: {
    onDeviceOrientationChange(e) {
      if (e.gamma > 80 || e.gamma < -80) { // 当横屏时 gamma 角度较大
        // 更新 UI 模板或样式以适应横屏模式
      }
    }
  }
}

3. **CSS媒体查询**：
你还可以在 CSS 中使用媒体查询，针对横屏和竖屏设计不同的样式，比如：

/* 默认竖屏样式 */
.container {
  flex-direction: column;
}

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