uni-app编译模式下 app端nvue页面使用plus.screen.lockOrientation('landscape-primary')设置横屏后退出 页面元素变大

uni-app编译模式下 app端nvue页面使用plus.screen.lockOrientation(‘landscape-primary’)设置横屏后退出 页面元素变大

开发环境 版本号 项目创建方式
PC Windows 11 HBuilderX
手机 Android 10

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 11 专业版/23H2/22635.3276

HBuilderX类型：正式

HBuilderX版本号：3.96

手机系统：Android

手机系统版本号：Android 10

手机厂商：OPPO

手机机型：R15

页面类型：vue

vue版本：vue2

打包方式：云端

App下载地址或H5网址：

http://39.108.133.46:8888/down/Ul0HJwnb9011

操作步骤：

进入播放页面，点击播放器，调出播放器底部的控制栏。再点击播放器底部的最右侧的控制图标，切换到全屏（横屏）。等待控制栏消失后，点击播放区域，重新调起控制栏，点击左上角的返回图标，返回竖屏状态，静止几秒，等待控制栏消失。再点击播放区域，调起控制栏。

预期结果：

无论是横屏状态还是恢复到竖屏状态，控制图标都正常显示，大小一样。

实际结果：

横屏后，图标变小；恢复到竖屏时，图标变大

bug描述：

在vue项目中，使用nvue组件。nvue中使用的是原生视频播放器组件。在vue页面中使用如下代码实现横屏，并将nvue页面的原生组件全屏（动态设置播放器的宽高）

```javascript
plus.navigator.setFullscreen(true); //隐藏状态栏    
plus.screen.lockOrientation('landscape-primary');

点击返回按钮，通过如下逻辑返回竖屏

plus.navigator.setFullscreen(false); //隐藏状态栏  
plus.screen.unlockOrientation()  
plus.screen.lockOrientation('portrait-primary');

截屏见附件。（编辑器按说明点图片右侧的“插入”无任何反应）


更多关于uni-app编译模式下 app端nvue页面使用plus.screen.lockOrientation('landscape-primary')设置横屏后退出 页面元素变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

您好。您知道如何ios强制横屏吗

更多关于uni-app编译模式下 app端nvue页面使用plus.screen.lockOrientation('landscape-primary')设置横屏后退出 页面元素变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


ios不知道呢，我这个app只在安卓上用。不好意思

您好 请问解决了吗

在 uni-app 的 nvue 页面中，使用 plus.screen.lockOrientation('landscape-primary') 设置横屏后，页面元素变大的问题通常是由于屏幕方向切换导致的布局重新计算和缩放问题。以下是一些可能的解决方案：

1. 检查 CSS 单位

  • 确保你在 nvue 页面中使用的 CSS 单位是 px 而不是 rpx 或 rem。nvue 页面不支持 rpx 和 rem，使用这些单位可能会导致布局在不同屏幕方向下出现异常。
  • 如果你确实需要使用相对单位，可以考虑使用 vw 和 vh，它们是基于视口大小的相对单位，能够在横竖屏切换时保持相对一致。

2. 使用 flex 布局

  • nvue 页面默认使用 flex 布局，确保你的布局是基于 flex 的，这样可以更好地适应屏幕方向的变化。
  • 使用 flex-direction 来调整布局方向，确保在横屏和竖屏下都能正确显示。

3. 监听屏幕方向变化

  • 你可以监听屏幕方向的变化，并在方向变化时动态调整布局或样式。
plus.screen.lockOrientation('landscape-primary');

plus.screen.onOrientationChange(() => {
    const orientation = plus.screen.orientation;
    if (orientation === 'landscape-primary' || orientation === 'landscape-secondary') {
        // 横屏时的处理
    } else {
        // 竖屏时的处理
    }
});

4. 手动调整布局

  • 在屏幕方向变化后，手动调整布局或样式，确保页面元素不会因为方向变化而变得过大或过小。

5. 使用 webview 的 resize 事件

  • 如果你在 nvue 页面中嵌入了 webview，可以监听 webview 的 resize 事件，并在事件触发时调整布局。

6. 检查 nvue 页面的 viewport 设置

  • 确保 nvue 页面的 viewport 设置正确，避免在横竖屏切换时页面缩放。

7. 使用 uni-app 的 onResize 生命周期

  • uni-app 提供了 onResize 生命周期钩子，可以在页面尺寸变化时执行一些操作。
export default {
    onResize(res) {
        if (res.size.width > res.size.height) {
            // 横屏时的处理
        } else {
            // 竖屏时的处理
        }
    }
}
回到顶部