uniapp 如何实现切换横屏功能

在uniapp中如何实现横竖屏切换功能？目前我的应用需要在特定页面强制横屏显示，但尝试了修改manifest.json的screenOrientation属性和使用plus.screen.lockOrientation方法都无效。请问正确的实现方式是什么？是否需要配合CSS或原生插件？能否提供具体代码示例？

htzhanglong 1楼

在uniapp中，可通过以下方式实现横屏切换：

在 pages.json 中配置页面横屏：

"style": {
  "pageOrientation": "landscape"
}

使用 plus.screen.lockOrientation 动态切换：

// 横屏
plus.screen.lockOrientation('landscape-primary');
// 竖屏  
plus.screen.lockOrientation('portrait-primary');

注意：部分平台可能不支持动态切换。

songsunli 2楼

在 UniApp 中，实现横屏功能可以通过以下步骤完成，主要依赖页面配置和 API 调用。以下是具体方法：

1. 全局配置横屏（适用于所有页面）

在 pages.json 中设置全局屏幕方向为横屏：

{
  "globalStyle": {
    "pageOrientation": "landscape"
  }
}

这会将所有页面强制设为横屏，但灵活性较低。

2. 单个页面配置横屏

在 pages.json 中针对特定页面设置横屏：

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

这样只有指定页面会以横屏显示，其他页面保持原有方向。

3. 动态切换横屏（使用 API）

通过 uni.setScreenOrientation API 在运行时动态切换方向：

// 切换到横屏
uni.setScreenOrientation({
  orientation: 'landscape'
});

// 切换回竖屏
uni.setScreenOrientation({
  orientation: 'portrait'
});

此方法适用于需要用户交互触发横竖屏切换的场景。

4. 监听屏幕方向变化

使用 uni.onWindowResize 监听方向变化并处理逻辑：

uni.onWindowResize((res) => {
  if (res.deviceOrientation === 'landscape') {
    console.log('当前为横屏');
    // 执行横屏相关操作
  } else {
    console.log('当前为竖屏');
    // 执行竖屏相关操作
  }
});

注意事项：

平台差异：横屏支持在 App 端和部分 H5 环境较完善，小程序端可能受限（例如微信小程序通常固定为竖屏）。

样式适配：横屏时需通过 CSS 媒体查询或动态类名调整布局：

[@media](/user/media) (orientation: landscape) {
  .content { flex-direction: row; }
}