rem适配时页面元素在不同手机上缩放比例不一致怎么办？

开发者阳阳提问于 2026-02-16 01:20:30 阅读 50

移动

我用rem方案开发移动端时，设置了根字体大小根据屏幕宽度计算，但iPhone12和小米11上按钮大小明显不一样，html{font-size:50px}明明是动态计算的啊…

代码是这样写的：

function setRem() {
  const width = document.documentElement.clientWidth;
  document.documentElement.style.fontSize = width / 10 + 'px';
}
window.addEventListener('resize', setRem);
setRem();

但在真机调试时发现，同样10rem宽的div，iPhone显示比预期小很多，而安卓机型又偏大，这是哪里出问题了？

我来解答赞 7 收藏

反馈

1 条解答

程序员爱玲 Lv1

这个问题我也踩过坑，说白了就是不同设备的屏幕像素密度和缩放机制导致的。虽然你动态计算了根字体大小，但忽略了设备的 dpr（设备像素比）。iPhone 和安卓在处理 viewport 上有差异，直接用 clientWidth 计算会导致偏差。

解决方法其实不复杂，核心是把 dpr 考虑进去。你可以用 window.devicePixelRatio 获取设备的像素比，然后调整你的 rem 计算逻辑。不过更推荐的做法是借助 flexible.js 或者 viewport 单位来处理适配问题，少走弯路。

如果你不想引入额外库，可以改成这样：

(function () {

  function setRem() {

    const dpr = window.devicePixelRatio || 1;

    const scale = 1 / dpr;

    const meta = document.querySelector('meta[name="viewport"]');

    if (meta) {

      meta.setAttribute('content', width=device-width,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no);

    } else {

      const newMeta = document.createElement('meta');

      newMeta.name = 'viewport';

      newMeta.content = width=device-width,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no;

      document.head.appendChild(newMeta);

    }

    const width = document.documentElement.clientWidth;

    document.documentElement.style.fontSize = width / 10 + 'px';

  }

  window.addEventListener('resize', setRem);

  setRem();

})();

这里的关键点是动态设置 viewport 的缩放比例，让不同设备的显示效果尽量一致。另外提醒一下，别忘了测试极端分辨率的设备，比如一些奇葩的小屏机或者折叠屏，它们可能会暴露新的问题。

如果觉得 rem 还是麻烦，也可以试试 vw/vh 单位配合 postcss-px-to-viewport 插件，效果也不错，省得自己折腾。总之多试几种方案，找到最适合你们项目的那个。

2026-02-16 08:01