应将 pages.json 中的 rpxcalcmaxdevicewidth、rpxcalcbasedevicewidth 和 rpxcalcincludewidth 配置置于 "globalstyle" 内，使 pc 端 rpx 以 375px 为基准换算，避免因真实屏幕宽度导致文字图片过大、布局拉伸。
uni-app H5 在 PC 浏览器里文字/图片过大、布局拉伸怎么办
根本原因是 rpx 单位在 PC 端仍按实际屏幕宽度（比如 1920px）做基准换算，导致 750rpx 被撑成远超 375px 的物理像素。结果就是按钮巨大、文字糊脸、间距爆炸——不是代码写错了，是单位“算得太认真”。
最直接有效的解法是：**让 PC 端的 rpx 计算强制锚定在 375px 基准上，而不是真实窗口宽度**。官方已支持，无需 hack window.innerWidth 或注入脚本。
- 打开
pages.json，在"globalStyle"下添加三行配置：
"rpxCalcMaxDeviceWidth": 960, "rpxCalcBaseDeviceWidth": 375, "rpxCalcIncludeWidth": 750
其中 rpxCalcMaxDeviceWidth 表示：当浏览器宽度 > 960px 时，就不再用真实宽度参与 rpx 计算，而是回落到 rpxCalcBaseDeviceWidth（即 375px）；rpxCalcIncludeWidth 保持默认即可，它只影响特定场景下的特殊 rpx 换算逻辑。
为什么加了配置还是没生效？检查这几个地方
常见失效不是配置错，而是位置或条件没对上：
-
pages.json中该配置必须放在"globalStyle"对象内，不能塞进某个页面的"style"里 - 如果你用了自定义 H5 模板（如
index.html），要确认没手动覆盖viewport的width值（例如写死width=1920），否则会干扰 rpx 基准判定 - 某些旧版 uni-app（
- 浏览器缓存可能保留旧的 JS bundle，改完配置后清空缓存并硬刷新（
Ctrl+Shift+R）
内容居中 + 限制宽度，CSS 层面补一刀更稳
即使 rpx 计算正确，PC 端全宽显示仍会让窄屏设计被左右留白“孤立”。这时候靠 CSS 控制容器宽度比改 JS 更可控、更易调试：
- 在
App.vue的<style></style>中，用条件编译只作用于 H5：
/* #ifdef H5 */
body {
max-width: 375px;
margin: 0 auto;
}
/* #endif */
注意：不要写 width: 375px，否则小屏手机也会被锁死；max-width 才是关键——移动端照常响应，PC 端超宽时自动居中收束。
如果项目用了自定义字体大小（比如通过 document.documentElement.style.fontSize 动态设根字号），也要同步加判断：只在 PC 端限制根元素宽度后再计算 font-size，否则字体缩放会和 rpx 错位。
tabbar / navbar 在 PC 端显示异常怎么调
PC 端默认仍渲染 H5 导航栏和底部 tabbar，但它们没做宽度适配，容易溢出或错位。两个动作必须做：
- 关掉原生导航栏：在
pages.json对应页面的style.h5下设"titleNView": false - tabbar 需单独控制宽度：在
App.vue或 tabbar 组件的样式里，给.uni-tabbar加max-width: 375px; margin: 0 auto;，否则它会按 100% 父容器宽度渲染，撑开整个 PC 屏幕
rpx 机制本身不接管 tabbar 的宽度逻辑，它是独立组件，必须显式约束。
真正容易被忽略的是：PC 端的 uni.getSystemInfo 返回的 windowWidth 仍是真实值（比如 1920），但 rpx 已按 375 计算——这意味着你在 JS 里用 windowWidth 做条件判断时，别误以为它和 rpx 显示效果同步。需要宽度感知的地方，优先用 CSS 媒体查询或 matchMedia，而非依赖 JS 获取的原始尺寸。
