现场是这样的。移动端正文用 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 的坑在基数,改动根字号会牵动全站,先确认没有被别的样式覆盖。如果同一现象隔几天又出现,说明根因没找到,别当偶发处理。
