uniapp横屏h5

设置全局横屏显示

在pages.json中配置页面样式，添加"pageOrientation": "auto"允许横屏。如需强制横屏，使用"pageOrientation": "landscape"。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "landscape"
      }
    }
  ]
}

动态切换横竖屏

通过uni.setScreenOrientationAPI动态控制屏幕方向。示例代码强制横屏：

uni.setScreenOrientation({
  orientation: 'landscape'
});

恢复竖屏调用：

uni.setScreenOrientation({
  orientation: 'portrait'
});

CSS适配横屏布局

使用媒体查询针对横屏样式调整：

@media screen and (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

处理横屏尺寸变化

监听onResize事件响应屏幕旋转：

onLoad() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    const isLandscape = window.innerWidth > window.innerHeight;
    // 横屏逻辑处理
  }
}

横屏兼容性注意事项

• 部分低版本Android浏览器可能不支持API，需测试降级方案。
• iOS系统可能需要在manifest.json中配置"screenOrientation": ["landscape"]。
• 横屏模式下注意键盘弹出可能遮挡输入框的问题。