uni-app nvue编译到app时使用rpxCalcMaxDeviceWidth后，在iPad中运行出现rpx相关的bug

uni-app nvue编译到app时使用rpxCalcMaxDeviceWidth后，在iPad中运行出现rpx相关的bug

示例代码：

//pages.json里面配置了这个参数，ipad就不会适配rpx了  
"globalStyle": {  
    "rpxCalcMaxDeviceWidth": 760  
}
```

## 操作步骤：

- 任意nvue页面写一个font-size:36rpx

## 预期结果：

- ipad正常文字大小

## 实际结果：

- 超大文字

## bug描述：

配置了`rpxCalcMaxDeviceWidth`后`nvue`页面运行到`ipad`，在h5表现正常。  
vue页面也正常。  
但是nvue运行到ipad的时候会导致文字很大。
```

| 信息类别         | 信息内容          |
|------------------|-------------------|
| 产品分类         | uniapp/App        |
| PC开发环境操作系统 | Windows           |
| PC开发环境操作系统版本号 | win11             |
| HBuilderX类型   | 正式              |
| HBuilderX版本号 | 4.11              |
| 手机系统         | iOS               |
| 手机系统版本号   | iOS 17            |
| 手机厂商         | 苹果              |
| 手机机型         | ipad              |
| 页面类型         | nvue              |
| vue版本         | vue3              |
| 打包方式         | 云端              |
| 项目创建方式     | HBuilderX         |

更多关于uni-app nvue编译到app时使用rpxCalcMaxDeviceWidth后，在iPad中运行出现rpx相关的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已经写的很清楚了，就是不支持，不是BUG，仔细看文档啊铁子

更多关于uni-app nvue编译到app时使用rpxCalcMaxDeviceWidth后，在iPad中运行出现rpx相关的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好把，知道了，但是vue3实际上也是支持的。为什么不支持nvue呢。。

在 uni-app 的 nvue 页面中，使用 rpx 作为单位时，默认会根据设备的屏幕宽度进行适配。rpxCalcMaxDeviceWidth 是一个配置项，用于设置 rpx 计算的最大设备宽度。如果在 iPad 上运行出现 rpx 相关的 bug，可能是因为 rpxCalcMaxDeviceWidth 的设置与 iPad 的实际屏幕宽度不匹配，导致样式计算错误。

解决方法

  1. 检查 rpxCalcMaxDeviceWidth 的设置：

    • rpxCalcMaxDeviceWidth 默认值为 750，表示 750rpx 等于屏幕的宽度。
    • 如果设置为其他值，可能会导致在某些设备（如 iPad）上样式计算错误。建议保持默认值 750，除非有特殊需求。

  2. 动态调整 rpxCalcMaxDeviceWidth：

    • 可以根据设备类型动态设置 rpxCalcMaxDeviceWidth。例如，如果是 iPad，可以设置一个更大的值，以确保样式适配。
    const deviceWidth = uni.getSystemInfoSync().windowWidth;
if (deviceWidth > 750) {
    uni.$rpxCalcMaxDeviceWidth = deviceWidth;
}

  3. 使用 px 或 vw 代替 rpx：

    • 如果 rpx 在 iPad 上表现不稳定，可以考虑使用 px 或 vw 作为单位，手动计算样式值。

  4. 检查样式代码：

    • 确保 rpx 的使用方式正确，避免在计算中使用 rpx 导致的精度问题。例如：
      .example {
    width: 375rpx; /* 正确 */
    height: calc(100rpx + 50rpx); /* 避免复杂计算 */
}

  5. 更新 uni-app 版本：

    • 确保使用的是最新版本的 uni-app，官方可能已经修复了相关 bug。

  6. 使用 nvue 的 flex 布局：

    • nvue 页面推荐使用 flex 布局，可以更好地适配不同屏幕尺寸。

示例代码

// 动态设置 rpxCalcMaxDeviceWidth
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'ios' && systemInfo.model.includes('iPad')) {
    uni.$rpxCalcMaxDeviceWidth = 1024; // 根据 iPad 的实际宽度调整
}
回到顶部