app横屏状态rpx数值不正确

app横屏状态rpx数值不正确

示例代码：

{
    "globalStyle": {
        "pageOrientation": "landscape",
        "rpxCalcMaxDeviceWidth": 2048,
        "rpxCalcBaseDeviceWidth": 2048,
        "rpxCalcIncludeWidth": 750,
        "dynamicRpx": true
    }
}

操作步骤：

  • 退出app重启后rpx显示不正确

预期结果：

  • 退出app重启rpx正常显示

实际结果：

  • 不正确

bug描述：

app横屏状态rpx数值不对，编译后首次启动大小正常，750rpx宽度可以100%展示的，但是退出app重启后，只剩下一半左右了


5 回复

想到解决方法了，rpx数值不对只是在app重新打开时首页有问题，创建一个空页面index2当作app的首页，

<script setup> import { onLoad } from '[@dcloudio](/user/dcloudio)/uni-app'; onLoad(()=>{ uni.reLaunch({ url:'/pages/index/index' }) console.log('重新打开了'); }) </script>

在onLoad时，跳转到真正的index页面，就可以解决首页rpx失效的问题，
期待官方正视和解决这个问题，为后期开发带来愉快的体验


找到解决方法了吗？我这边也出现了这样的问题，代码没问题，盒子width: 126rpx;height: 170rpx;退出app重启后，变的特别小，

我在平板横屏，有时候放置时间长，app自动退出登录重新进入之后，发现整个页面整体缩小，就是rpx 比实际小了

“rpxCalcMaxDeviceWidth”: 1920, “rpxCalcBaseDeviceWidth”: 375, “rpxCalcIncludeWidth”: 750

根据您描述的问题，这确实是uni-app在横屏模式下rpx计算的一个已知问题。以下是具体分析和解决方案：

  1. 问题原因：
  • 横屏模式下设备宽度计算可能不正确
  • rpx动态计算(dynamicRpx)在横屏重启后可能失效
  • 设备方向改变后rpx基准值没有正确重置
  1. 解决方案：
{
    "globalStyle": {
        "pageOrientation": "landscape",
        "rpxCalcMaxDeviceWidth": 2048,
        "rpxCalcBaseDeviceWidth": 2048,
        "rpxCalcIncludeWidth": 750,
        "dynamicRpx": false  // 关键修改点
    }
}
  1. 其他建议：
  • 确保manifest.json中也配置了横屏设置
  • 考虑使用px替代rpx或媒体查询处理横屏布局
  • 检查是否有自定义导航栏影响布局计算
  1. 临时解决方案： 在onShow生命周期中手动重置rpx计算：
onShow() {
    uni.getSystemInfo({
        success: (res) => {
            // 强制触发rpx重新计算
        }
    })
}
回到顶部