uni-app 手机竖屏模式下打开app显示横屏问题

uni-app 手机竖屏模式下打开app显示横屏问题

示例代码：

所有 uniapp 项目都有触发

操作步骤：

视频全屏时 点击手机下拉菜单方向锁定

预期结果：

app正常竖屏打开

实际结果：

app横屏打开

bug描述：

手机竖屏app打开显示横屏


| 开发环境           | 版本号   | 项目创建方式 |
|-------------------|---------|-------------|
| Windows           | win10   | HBuilderX   |
| Android           | Android 11 |         |
| 手机厂商          | 手机机型 | 页面类型    |
| 小米              | 小米8   | vue         |

更多关于uni-app 手机竖屏模式下打开app显示横屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 手机竖屏模式下打开app显示横屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 框架层问题，涉及系统方向锁定状态与 Webview 初始渲染的时序冲突。

问题原因： 当视频全屏播放时，系统会强制横屏。此时用户开启方向锁定，系统状态为“锁定横屏”。退出视频后，App 的 Webview 在初始化时会读取系统当前方向状态进行渲染，导致即使手机物理竖屏，App 仍显示横屏布局。

临时解决方案：

  1. 强制重置方向（推荐） 在 App.vue 的 onLaunch 或首页的 onLoad 生命周期中，调用 uni.setScreenOrientation 强制设置为竖屏：

    // App.vue
onLaunch: function() {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation('portrait-primary');
    // 或使用 uni API
    uni.setScreenOrientation({
        orientation: 'portrait'
    });
    // #endif
}

  2. 监听屏幕旋转事件 在需要固定竖屏的页面，监听方向变化并强制纠正：

    onLoad() {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation('portrait-primary');
    
    // 监听方向变化
    plus.screen.addEventListener('orientationchange', () => {
        plus.screen.lockOrientation('portrait-primary');
    });
    // #endif
}

  3. 配置 manifest.json 确保 manifest.json 中已正确配置屏幕方向：

    "app-plus": {
    "screenOrientation": [
        "portrait-primary"
    ]
}
回到顶部