根本原因是移动端 webkit 浏览器自动触发 font boosting，它绕过 css 优先级动态放大文本，与 font-size 值无关，只取决于容器宽度、原始字号、dpr 和系统设置；禁用最稳方式是加 max-height: 999999px 或 -webkit-text-size-adjust: 100%。
根本原因不是字体本身“忽大忽小”，而是移动端浏览器（尤其是 WebKit 内核）自动触发了 Font Boosting（也叫 Text Autosizer 或 Font Inflation），它会动态放大未受限的文本块，而这个行为与你写的 font-size 值无关——它只看容器宽度、原始字号、系统设置和设备 DPR，且不走 CSS 级联流程。
为什么 font-size 写了 16px，手机上却显示成 28px？
这是 Font Boosting 在起作用。它只在满足以下全部条件时激活：
- 页面没有明确设置
<meta name="viewport" content="width=device-width, initial-scale=1">，或设置了但initial-scale不为 1 - 文本所在元素没有显式限制尺寸（比如没设
max-height、width或flex-basis） - 原始
font-size落在敏感区间：通常或 <code>16px ~ (32 × multiplier − 16)px之间（multiplier 受devicePixelRatio和系统字体缩放影响）
例如你在 iPhone 上写 p { font-size: 14px; }，WebKit 可能算出 multiplier = 1.8，最终渲染为 14 × 1.8 ≈ 25px —— 你查 computed style 看到的就是这个值，但它不是你写的，也不受 !important 控制。
为什么加了 media query 还是无效？
因为 Font Boosting 发生在样式计算之后、布局之前，它绕过了 CSS 规则优先级。你在 @media (max-width: 480px) 里把 font-size 改成 12px，反而更容易触发 Boosting（更小字号 + 小屏宽度 = 更高 multiplier）。
- 别在 media query 里只调子元素字号，要改根节点：
:root { font-size: clamp(12px, 2.5vw, 16px); } - 禁用 Boosting 的最稳方式是加
max-height: 999999px到可能被 Boost 的元素上，比如p, li, .content-text { max-height: 999999px; } -
-webkit-text-size-adjust: none能关掉它，但会同时禁用用户手动缩放字体功能，慎用；若必须用，至少加上100%：-webkit-text-size-adjust: 100%
为什么有些组件字体“跳变”特别明显？
第三方 UI 库（如 Ant Design、Element Plus）常默认用 em 或固定 px 写字号，而它们的父容器又没做尺寸约束，导致 Boosting 在不同层级反复叠加计算。比如一个 .el-card__header 里嵌套 h3，两者都无 max-height，Boosting 可能先放大父容器再放大子标题，视觉上就是“突然变大”。
- 检查组件库文档是否提供
text-size-adjust相关开关（如 Ant Design 的typography组件支持fontScale） - 对关键文字容器加兜底规则：
.ant-typography, .el-message__content { max-height: 999999px; line-height: 1.5; } - 避免用
em写基础字号，统一用rem或clamp()，并确保html或:root是唯一缩放锚点
真正难处理的不是“怎么让字体变小”，而是“怎么让浏览器别自作主张放大”——Font Boosting 没有 devtools 面板可调试，它的触发逻辑藏在 WebKit 源码里，只能靠加约束、换单位、测边界值来逼近稳定态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
