uni-app nvue页面执行 plus.screen.lockOrientation('landscape-primary') 后页面横屏 rpx 失效

uni-app nvue页面执行 plus.screen.lockOrientation(‘landscape-primary’) 后页面横屏 rpx 失效

测试过的手机：

iPhone6-iPhone13；华为mate20，小米mix2，oppo Findx

操作步骤：

  • 安装apk并在底部tabbar点击直播之后进入直播间点击右下角全屏按钮

预期结果：

见附件 横屏页面正常图片

实际结果：

见附件 横屏页面错误图片

bug描述：

在nvue页面执行 plus.screen.lockOrientation(‘landscape-primary’) 将页面横屏之后 rpx 失效(详情请参考附件)

信息 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows 10
HBuilderX类型 正式
HBuilderX版本号 3.2.9
手机系统 全部
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

example.zip


更多关于uni-app nvue页面执行 plus.screen.lockOrientation('landscape-primary') 后页面横屏 rpx 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

请尽快回复

更多关于uni-app nvue页面执行 plus.screen.lockOrientation('landscape-primary') 后页面横屏 rpx 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


同问，请官方尽快解决！！！

请上传一个示例工程方便排查问题

示例工程方已上传完可以测试一下 HbuilderX 3.2.9 版本呢 安卓 iOS 均不正常

回复 9157654: 等比缩放：根据页面屏幕宽度缩放。rpx其实属于这种类型。在宽屏上，rpx变大，窄屏上rpx变小

回复 DCloud_iOS_XHY: 那这意思是我要写两套样式是吗

回复 9157654: 看下这个文档 https://uniapp.dcloud.io/frame?id=页面样式与布局

等比缩放：根据页面屏幕宽度缩放。rpx其实属于这种类型。在宽屏上，rpx变大，窄屏上rpx变小。

在nvue页面使用plus.screen.lockOrientation('landscape-primary')强制横屏后，rpx单位失效是已知问题。这是因为rpx基于屏幕宽度进行自适应，横屏后屏幕宽高互换，但nvue的rpx计算未及时更新。

解决方案：

  1. 改用px单位：在横屏页面直接使用px进行布局，避免依赖rpx。
  2. 动态计算样式：通过js获取屏幕尺寸，手动计算并设置样式。例如：
    const screenWidth = uni.getSystemInfoSync().screenWidth;
const scaleValue = screenWidth / 750; // 750为设计稿基准宽度
回到顶部