uniapp某个页面如何强制竖屏显示

在uniapp开发中，如何强制某个特定页面始终竖屏显示？我已经在pages.json里配置了全局竖屏，但有个页面需要单独处理横屏效果，其他页面保持竖屏。尝试过plus.screen.lockOrientation方法但无效，请问有什么可靠的解决方案吗？

2 回复

在uniapp页面中，可通过pages.json配置强制竖屏。在对应页面的style中添加"pageOrientation": "portrait"即可。


在 UniApp 中，可以通过以下方法强制某个页面竖屏显示：

1. 使用 pageOrientation 配置（推荐）

在 pages.json 中为特定页面配置屏幕方向：

{
  "pages": [
    {
      "path": "pages/your-page/your-page",
      "style": {
        "pageOrientation": "portrait"
      }
    }
  ]
}

2. 使用 CSS 媒体查询（辅助）

在页面样式中添加：

/* 横屏时强制竖屏显示 */
@media screen and (orientation: landscape) {
  page {
    transform: rotate(0deg);
    transform-origin: center center;
  }
}

3. 使用 JavaScript 动态设置（可选）

在页面的 onLoad 或 onShow 生命周期中：

onLoad() {
  // 锁定竖屏
  plus.screen.lockOrientation('portrait');
},
onUnload() {
  // 退出页面时解除锁定（可选）
  plus.screen.unlockOrientation();
}

注意事项：

  • pageOrientation 配置在 App 端和部分小程序平台有效
  • CSS 方法只是视觉上的旋转，不会真正改变设备方向
  • JavaScript 方法需要真机调试，仅 App 端支持
  • 小程序平台请参考各平台自身的配置规范

建议优先使用 pages.json 配置，兼容性最好。

回到顶部