uni-app 4k 屏（2160 * 3840）使用 rpx 显示预期不一致-2

uni-app 4k 屏（2160 * 3840）使用 rpx 显示预期不一致-2

开发环境 版本号 项目创建方式
Windows win 10 HBuilderX

示例代码：

<view>
<view style="width: 750rpx; height: 750rpx; background-color: red;">
<view style="width: 375rpx; height: 375rpx; background-color: yellow;"></view>
</view>    
</view>

<view style="width: 760rpx; height: 760rpx; background-color: blue;">    
    <view style="width: 375rpx; height: 375rpx; background-color: yellow;"></view>    
</view>

操作步骤：

创建项目，随便一个页面，把我的代码复制进去就能看到效果。把浏览器显示的分辨率改成 4k

预期结果：

rpx 实现屏幕切分成 750 份

实际结果：

无

bug描述：

看我上传的图，在4k屏（2160 * 3840）下，750rpx 和 375rpx 宽度只有 750rpx 生效。375rpx 没有达到屏幕一半，与预期显示不符。同时设置大于 750rpx 也不生效


更多关于uni-app 4k 屏（2160 * 3840）使用 rpx 显示预期不一致-2的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

设置下最大宽度试试呢 参考文档：https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle

更多关于uni-app 4k 屏（2160 * 3840）使用 rpx 显示预期不一致-2的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢哈，好像真有用，我先去测试一下

在4K分辨率下出现rpx显示异常，这通常与uni-app的rpx计算机制和浏览器缩放有关。rpx以750px设计稿为基准，将屏幕宽度分为750单位，但在高分辨率设备上可能出现计算偏差。

问题分析：

  1. 浏览器模拟4K分辨率时，CSS像素与物理像素比例可能不为1:1
  2. 当屏幕实际宽度超过750物理像素时，rpx计算可能出现精度问题
  3. 部分浏览器在高分辨率下对viewport处理存在差异

解决方案：

  1. 检查项目根目录的manifest.json中是否配置了正确的设计宽度：
{
  "app-plus": {
    "flexible": true
  }
}
  1. 使用px替代rpx进行测试，确认是否为单位计算问题：
<view style="width: 375px; height: 375px; background: green;"></view>
  1. 在页面添加调试代码验证实际rpx计算值：
onReady() {
  const query = uni.createSelectorQuery()
  query.select('.test-view').boundingClientRect(data => {
    console.log('实际宽度:', data.width)
  }).exec()
}
  1. 考虑使用CSS媒体查询针对4K屏幕单独处理：
[@media](/user/media) screen and (min-width: 3840px) {
  .high-dpi-element {
    transform: scale(0.5);
  }
}
回到顶部