PC端uni-app H5页面rpx显示过窄，因默认逻辑视口硬编码为375px且不随窗口变化；需配置rpxCalculation:"auto"、监听resize重设font-size，并用rpxCalcMaxDeviceWidth限制超宽屏基准。

PC 浏览器里打开 uni-app H5 页面，内容只占左上角一小块、两边大片留白——这不是样式没写全，而是 rpx 在宽屏下仍按 375px 基准计算，导致 750rpx 只撑开 375px 宽度，实际视口却有 1920px，视觉上就“缩成一团”。

为什么 PC 端 rpx 显示过窄

uni-app H5 默认把逻辑视口硬编码为 375px（即 document.documentElement.style.fontSize = '37.5px'），不随 window.innerWidth 动态变化。哪怕你在 2K 屏幕里打开，width: 750rpx 还是解析成 375px，自然显得极窄。

• 仅影响 H5 端，小程序和 App 不受此限制
• 现象包括：按钮过小、文字看不清、左右留白严重、flex 布局错位
• 不是 CSS 写错了，是根字体大小没更新，rpx 换算链断在了第一步

启用 rpxCalculation: "auto" 并监听 resize

必须显式告诉 H5 运行时：“别锁死 375，去读真实视口宽度”。这需要两步同时生效：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 在 manifest.json 的 "h5" 节点下添加："rpxCalculation": "auto"
• 在项目入口（如 main.js 或 App.vue 的 onLaunch）中监听窗口变化：

  uni.addResizeListener(() => {
    // 触发内部 rpx 基准重算（会清空并重设 font-size）
    document.documentElement.style.fontSize = '';
  });

• 低版本 H5 运行时可能不支持 uni.addResizeListener，建议加 try/catch fallback 到原生 window.addEventListener('resize', ...)

rpxCalcMaxDeviceWidth 和 rpxCalcBaseDeviceWidth 控制上限

即使开了 "auto"，超宽屏（如 3840px）下 750rpx 会变成 3840px，内容反而过大。这时需用最大设备宽度兜底：

• 在 pages.json 的 "globalStyle" 下配置：

  "rpxCalcMaxDeviceWidth": 960,
  "rpxCalcBaseDeviceWidth": 375

• 含义：当设备宽度 > 960px 时，rpx 计算不再用真实宽度，而是回落到 375px 基准（即 750rpx = 375px）
• 配合 CSS 居中更稳妥：body { max-width: 375px; margin: 0 auto; }（用条件编译 /* #ifdef H5 */ 包裹）

避免依赖 vh 导致高度塌陷连带影响宽度感知

部分项目在 vue.config.js 或 manifest.json 中启用了 viewport 适配（如基于 vh 的方案），这会导致 iOS Safari 地址栏收起时高度突变，间接干扰宽度计算逻辑和 rpx 渲染稳定性。

• 直接禁用官方 viewport 适配，改用 rem + resize 监听重设根字体
• 不要在关键布局中混用 vh 和 rpx，尤其在 PC 宽屏下，vh 值本身就不稳定
• 若必须用视口单位，优先选 vw，但注意它同样受 rpxCalculation 配置影响

真正起效的关键不在单个配置，而在于 rpxCalculation: "auto"、resize 监听、rpxCalcMaxDeviceWidth 三者是否全部到位；漏掉任意一环，PC 端的 rpx 就还是卡在 375px 上不动。