uniapp如何适配平板横屏

在 UniApp 中适配平板横屏，主要通过以下方法实现，确保应用在横屏模式下正常显示和交互：

1. 配置横屏模式

• 在 pages.json 中设置全局或页面级屏幕方向：

  {
    "globalStyle": {
      "pageOrientation": "auto" // 允许横竖屏切换
    },
    "pages": [
      {
        "path": "pages/index/index",
        "style": {
          "pageOrientation": "landscape" // 强制横屏（仅该页面）
        }
      }
    ]
  }
  

  • auto：根据设备方向自动切换。
  • portrait：强制竖屏。
  • landscape：强制横屏。

2. 响应式布局

• 使用 Flex 布局或 Grid 布局，结合百分比或 rpx 单位适配不同宽度。
• 通过 CSS 媒体查询调整横屏样式：

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

3. 监听屏幕旋转事件

• 使用 uni.onWindowResize 监听方向变化，动态调整布局：

  uni.onWindowResize((res) => {
    if (res.size.windowWidth > res.size.windowHeight) {
      console.log('横屏模式');
      // 更新布局状态
    }
  });
  

4. 横屏适配组件

• 自定义组件时，通过 computed 或 onResize 动态计算布局：

  export default {
    data() {
      return {
        isLandscape: false
      };
    },
    mounted() {
      this.checkOrientation();
      uni.onWindowResize(() => this.checkOrientation());
    },
    methods: {
      checkOrientation() {
        const { windowWidth, windowHeight } = uni.getSystemInfoSync();
        this.isLandscape = windowWidth > windowHeight;
      }
    }
  };
  

5. 注意事项

• 兼容性：部分 API（如 onWindowResize）需在较高基础库版本支持。
• 固定方向：若需全局横屏，可在 pages.json 中统一配置，避免页面跳动。
• 测试：使用平板模拟器或真机测试横竖屏切换效果。

通过以上方法，可灵活实现横屏适配，提升平板用户体验。