uniapp 如何动态调整页面横竖屏

在uniapp中如何实现页面横竖屏的动态切换？我的需求是根据不同设备或用户操作自动调整屏幕方向，试过一些CSS方法但效果不理想。请问有没有官方推荐的方式或插件可以实现？需要兼容Android和iOS平台，最好能提供具体代码示例。

2 回复

在uniapp中，可通过plus.screen.lockOrientation动态锁定屏幕方向。例如：plus.screen.lockOrientation("portrait-primary")锁定竖屏，plus.screen.lockOrientation("landscape-primary")锁定横屏。注意需在plusready后调用，且部分平台可能不支持。


在 UniApp 中，可以通过以下方法动态调整页面的横竖屏显示：

1. 设置页面横竖屏方向

在 pages.json 中配置页面的 pageOrientation 属性，控制单个页面的横竖屏：

{
  "path": "pages/index/index",
  "style": {
    "pageOrientation": "auto" // 可选值：portrait（竖屏）、landscape（横屏）、auto（跟随系统）
  }
}

2. 动态修改横竖屏

使用 uni.setPageOrientation API 在运行时切换方向：

// 设置为横屏
uni.setPageOrientation({
  orientation: 'landscape'
});

// 设置为竖屏
uni.setPageOrientation({
  orientation: 'portrait'
});

// 跟随系统
uni.setPageOrientation({
  orientation: 'auto'
});

3. 监听屏幕方向变化

通过 uni.onWindowResize 监听屏幕方向变化：

uni.onWindowResize((res) => {
  console.log('屏幕尺寸变化:', res.size);
  if (res.size.windowWidth > res.size.windowHeight) {
    console.log('当前为横屏');
  } else {
    console.log('当前为竖屏');
  }
});

注意事项：

  • 平台差异：setPageOrientation 在部分平台（如小程序）可能受限，需测试目标平台支持性。
  • 全局配置：在 pages.json 的 globalStyle 中设置 pageOrientation 可应用全局默认值。
  • 页面生命周期：方向切换可能触发页面的重新渲染，需在 onResize 生命周期处理布局适配。

通过以上方法，即可灵活控制 UniApp 页面的横竖屏显示。

回到顶部