uni-app rpx适配APP横屏模式问题

项目属性	信息
产品分类	uniapp/App
PC开发环境	Windows
HBuilderX版本	4.76
手机系统	Android
手机系统版本	Android 14
手机厂商	小米
手机机型	xiaomipad6
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

操作步骤：

plus.screen.lockOrientation("landscape-primary")

预期结果：

plus.screen.lockOrientation("landscape-primary")

实际结果：

plus.screen.lockOrientation("landscape-primary")

bug描述：

场景：只用横屏模式不用竖屏模式，我看manifest.json里没有提供横屏模式我就用的plus.screen.lockOrientation(“landscape-primary”)强制横屏但pad适配横屏模式，rpx第一个页面会适配竖屏模式，导致样式全是小版

更多关于uni-app rpx适配APP横屏模式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 1楼

在pages.json中配置横屏globalStyle.pageOrientation

更多关于uni-app rpx适配APP横屏模式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼

我最近也在做pad，我直接用了px单位，不用rpx了

wuwangju 3楼

我现在不用rpx了，问题太多，用了scss的一个函数@use “sass:math”;

caililin 4楼

// 全局共享的函数（使用新的除法语法） @function tovmax($rpx) { // 使用math.div()替代/进行除法运算 @return #{math.div(math.div($rpx * 100, 750), 1)}vmax; } @debug tovmax(375);

h691938207 5楼

在 uni-app 中，使用 plus.screen.lockOrientation("landscape-primary") 强制横屏时，rpx 单位在初始页面可能仍基于竖屏的屏幕宽度计算，导致样式显示异常。这是因为 rpx 依赖的 uni.getSystemInfoSync() 在页面加载时已缓存竖屏数据，横屏锁定未及时更新。

解决方案：

使用 px 或 vw 单位替代 rpx：横屏布局建议采用 px 或 vw 等动态单位，避免依赖屏幕方向变化。例如，通过 JS 计算横屏下的实际宽度：
```
const screenWidth = uni.getSystemInfoSync().screenHeight; // 横屏时高度为实际宽度
```
监听屏幕旋转事件：通过 uni.onWindowResize 监听方向变化，并重新计算样式：
```
uni.onWindowResize(() => {
  // 更新布局逻辑
});
```

CSS Media Query 适配横屏：在样式文件中针对横屏单独定义：

[@media](/user/media) (orientation: landscape) {
  .content { width: 100vw; }
}