uniapp如何实现横屏显示

在uniapp开发中，如何强制让应用始终横屏显示？尝试在pages.json里配置"pageOrientation": "auto"和"landscape"都没生效，真机测试还是竖屏。需要兼容iOS和Android平台，有没有完整的解决方案？

2 回复

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

  1. 在pages.json中配置页面方向：
{
  "globalStyle": {
    "pageOrientation": "auto"
  }
}
  1. 使用CSS强制横屏：
page {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}
  1. 在App端可使用plus.screen.lockOrientation('landscape')锁定横屏。

在 UniApp 中实现横屏显示，可以通过以下步骤完成：

1. 配置 pages.json 文件

在 pages.json 的 globalStyle 或具体页面配置中设置 "pageOrientation": "auto"，允许横屏：

{
  "globalStyle": {
    "pageOrientation": "auto"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "landscape" // 仅该页面强制横屏
      }
    }
  ]
}
  • "auto"：支持横竖屏切换。
  • "landscape"：强制横屏。
  • "portrait"：强制竖屏。

2. 使用 CSS 媒体查询适配横屏样式

在样式文件中添加横屏适配：

/* 横屏样式 */
@media screen and (orientation: landscape) {
  .content {
    transform: rotate(90deg);
    width: 100vh;
    height: 100vw;
  }
}

3. 通过 JavaScript 监听屏幕方向变化

在页面中监听方向变化并调整布局：

onLoad() {
  // 监听横竖屏变化
  window.addEventListener('orientationchange', this.handleOrientationChange);
},
methods: {
  handleOrientationChange() {
    if (window.orientation === 90 || window.orientation === -90) {
      console.log('横屏状态');
      // 调整页面逻辑
    }
  }
}

4. 注意事项

  • 平台差异：部分安卓设备可能需要原生配置（如修改 AndroidManifest.xml）。
  • 组件适配：横屏时需重新计算宽高，避免布局错乱。
  • App 端：若需全局横屏，可在原生工程中设置屏幕方向。

通过以上步骤，即可在 UniApp 中灵活实现横屏显示及适配。

回到顶部