uniapp如何实现自动横屏和竖屏切换

在uniapp中如何实现页面根据设备方向自动切换横屏和竖屏？我尝试了在manifest.json中配置"orientation": “auto”，但实际测试时部分安卓机型无法生效。有没有更可靠的实现方案？需要注意哪些平台的兼容性问题？

caililin 1楼

在uniapp中，可通过plus.screen.lockOrientation方法锁定屏幕方向。例如：

横屏：plus.screen.lockOrientation('landscape')
竖屏：plus.screen.lockOrientation('portrait')
自动：plus.screen.lockOrientation('auto')

注意：需在manifest.json中配置支持横竖屏。

sinazl 2楼

在 UniApp 中，可以通过以下方法实现自动横屏和竖屏切换：

1. 使用 `plus.screen` 设备方向 API（仅 App 端）

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

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "auto" // 支持自动横竖屏
      }
    }
  ]
}

在页面中监听屏幕方向变化：

// 仅 App 端生效
onLoad() {
  if (typeof plus !== 'undefined') {
    plus.screen.lockOrientation('portrait-primary'); // 初始锁定竖屏
    plus.screen.onOrientationChange = (res) => {
      console.log('当前方向:', res.orientation);
      // 根据方向调整布局
    };
  }
}

2. 使用 CSS Media Queries（全端通用）

通过 CSS 媒体查询适配横竖屏：

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

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

3. 使用 JavaScript 检测方向变化（H5 端）

onLoad() {
  // 检测方向变化（H5 和部分 App 端有效）
  window.addEventListener('orientationchange', () => {
    const orientation = window.orientation;
    if (Math.abs(orientation) === 90) {
      console.log('横屏');
    } else {
      console.log('竖屏');
    }
  });
}

4. 锁定屏幕方向（App 端）

// 锁定竖屏
plus.screen.lockOrientation('portrait');

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

// 解锁方向
plus.screen.unlockOrientation();

注意事项：

plus.screen 仅 App 端可用，需在条件编译中判断
H5 端依赖浏览器支持，部分移动端浏览器可能限制自动横屏
小程序端通常不支持动态横竖屏切换，需在 app.json 中全局配置