现场是这样的。移动端正文用 rem 排版,根元素 font-size 写在媒体查询里但被重置插件覆盖成 10px,正文实际只有 9px,百度体验检测提示字号过小。

中间走过弯路,把「正文用了 0.9rem,基数变小后不足 12px」当成主因,改完现象没变。

原因不止一个,得分开看。html 的 font-size 被重置插件覆盖成 10px;媒体查询写在前面,被后面的规则覆盖;部分浏览器强制最小字号,布局跟着错位。

上来先看根字号的计算值

curl -s https://www.example.com/post-1/ | Select-String "font-size"

接着把根字号固定为 16px

echo 'html{font-size:16px}';

正文最小字号提到 14px

echo 'body{font-size:0.875rem}';

复核移动端实际字号

npx lighthouse https://www.example.com/post-1/ --only-audits=font-size --chrome-flags="--headless"

这类问题以前遇到过,但这次的触发条件和上次不一样。

这类改动我都写进变更记录,过两周再出问题时能对上号。

别只看报错消失,验证要多做一步。移动端正文实际字号不小于 14px,体验检测不再提示字号过小。

rem 的坑在基数,改动根字号会牵动全站,先确认没有被别的样式覆盖。如果同一现象隔几天又出现,说明根因没找到,别当偶发处理。

作者 9823189