uniapp旋转横屏

实现横屏模式的方法

在UniApp中实现横屏模式，可以通过配置页面方向或使用CSS旋转实现。以下是两种常见方法：

修改manifest.json配置 在项目的manifest.json文件中，找到"app-plus"节点，添加屏幕方向设置。例如强制横屏：

"app-plus": {
  "screenOrientation": [
    "landscape-primary",
    "landscape-secondary"
  ]
}

动态修改屏幕方向 使用plus.screen.lockOrientationAPI动态控制方向：

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

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

CSS旋转实现横屏效果

对于不需要真正改变设备方向的场景，可通过CSS变换模拟横屏效果：

.landscape-mode {
  transform: rotate(90deg);
  transform-origin: left top;
  width: 100vh;
  height: 100vw;
  position: absolute;
  top: 100%;
  left: 0;
}

注意事项

• 真机调试时部分Android设备可能需要配置android:screenOrientation
• iOS平台需确保在Xcode项目的General设置中勾选所有方向
• 使用动态API时注意处理返回按钮等系统控件的布局适配
• CSS方案可能影响触摸事件坐标，需要额外处理交互逻辑

横屏适配建议

1. 使用uni.getSystemInfo获取窗口尺寸重新计算布局
2. 通过onResize监听窗口变化：

   uni.onWindowResize((res) => {
   console.log(res.size.windowWidth, res.size.windowHeight);
   });

3. 横竖屏样式差异可通过媒体查询处理：

   @media screen and (orientation: landscape) {
   /* 横屏专属样式 */
   }

以上方法可根据具体需求选择使用，manifest配置适用于全局设置，API调用适合部分页面横屏的场景。