为什么用rem方案后移动端页面在不同机型下字体和间距错乱？

慕容小敏提问于 2026-01-29 18:13:26 阅读 57

移动

最近在用rem方案做移动端适配，按教程设置了html根字体大小，但发现iPhone 12和华为nova9的字体和间距显示完全不一样，1rem在nova9上显得特别大。

我按教程写了个动态计算函数：


function setRem() {
  const scale = document.documentElement.clientWidth / 375;
  document.documentElement.style.fontSize = Math.min(scale * 16, 40) + 'px';
}
window.addEventListener('resize', setRem);
setRem();

但测试发现华为手机上文字撑破容器，而iPhone却正常。是不是计算基准有问题？试过改成750基准也没好转，求大佬指点！

H5开发移动端开发移动适配

我来解答赞 8 收藏

反馈

2 条解答

柯豫 ☘︎ Lv1

这个问题我也踩过坑，别走弯路，问题出在你动态计算的逻辑和设备像素密度没考虑清楚。

你当前的方案只考虑了屏幕宽度，但忽略了不同手机的**devicePixelRatio**（像素密度），特别是像华为nova9这类安卓机，很多都是**1.5或2倍屏**，而iPhone 12是标准的2倍屏。这就导致1rem在不同设备上的实际像素表现不一致。

### 解决方案：

修改你的 setRem 函数，把像素密度考虑进去，如下：

function setRem() {

  const baseSize = 16; // 对应1rem = 16px

  const scale = document.documentElement.clientWidth / 375;

  let fontSize = scale * baseSize;



  // 根据设备像素密度调整

  const pixelRatio = window.devicePixelRatio;

  fontSize = fontSize * (pixelRatio >= 2 ? 2 : pixelRatio);



  // 限制最大字体，避免过大

  document.documentElement.style.fontSize = Math.min(fontSize, 40) + 'px';

}

另外，别忘了在标签加上 viewport 的 meta：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这个改动能让你的rem在不同设备上保持相对一致的视觉大小，而不是只靠clientWidth来算。

再强调一次，别只盯着宽度，devicePixelRatio这个值在安卓上很容易被忽略，但它是影响最终显示效果的关键因素之一。

2026-02-03 14:17

义霞 Dev Lv1

问题出在不同设备的默认字体大小和 dpi 不一致。直接用 viewport 的宽度来计算 rem 是不够的，建议加上设备像素密度修正：

function setRem() {

  const scale = document.documentElement.clientWidth / 375;

  const dpr = window.devicePixelRatio || 1;

  document.documentElement.style.fontSize = Math.min(scale * 16 * dpr, 40) + 'px';

}

window.addEventListener('resize', setRem);

setRem();

再测测看，应该就正常了。

2026-01-29 19:11