真正起效的是 clamp() + text-size-adjust: 100% + 无单位 line-height 三者配合，缺一不可；其中 clamp() 需按设计稿基准反推中间值，text-size-adjust 必须全局设于 html，line-height 必须用无单位值以确保等比缩放。
直接给结论：单用媒体查询或单用 clamp() 都不能根治移动端字体不一致问题，真正起效的是 clamp() + text-size-adjust: 100% + 无单位 line-height 三者配合，缺一不可。
为什么 clamp(14px, 4vw, 22px) 单独写没用
常见错误是把 clamp() 当成“自动适配神器”，随便套个值就上线。但实际中：clamp(14px, 4vw, 22px) 在 iPhone 12（390px 宽）上算出来约 15.6px，在 iPad mini（768px）上却卡在 22px 上限——看似安全，但中间段的 4vw 其实是以 375px 设计稿为基准推导的，若设计稿逻辑宽度是 414px，那 4vw 就偏大，小屏字反而撑满行宽。
更关键的是：clamp() 控制不了浏览器的自动缩放行为。DevTools 里看着准，一上真机（尤其 Android Chrome、Samsung Internet），字体可能被强制放大或压缩，computed font-size 和声明值对不上。
- 选中间值要反推：若设计稿以 375px 为基准，目标字号 16px，则中间项应为
16px / 375 * 100 ≈ 4.27vw，取整写4.25vw比4vw更稳 - 标题和正文必须分设：正文用
clamp(14px, 4.25vw, 18px)，H1 用clamp(20px, 6.5vw, 32px)，不能共用一套 - 别在
clamp()里混用rem或em：它只接受绝对单位或视口单位，clamp(1rem, 4vw, 2rem)是非法语法
text-size-adjust: 100% 必须加在 html 上
这是真机不一致的根源所在。Android 和部分 iOS 浏览器会基于容器宽度、行高、字号是否小于 16px 等条件，自动触发 Font Boosting 或压制，且该行为 DevTools 模拟器默认关闭——所以你永远调不对。
立即学习“前端免费学习笔记（深入）”；
只加 -webkit-text-size-adjust: 100% 不够，旧版 Samsung Internet 会忽略；只加在某个 .footer 上也不行，因为缩放是按文本块上下文触发的，全局锁定才可靠。
- 正确写法：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } - 不要用
none：虽然彻底禁用缩放，但会破坏系统级可访问性设置（如视力障碍用户调大系统字体） - 不用包
@media：该属性桌面端自动忽略，移动端强制生效，加媒体查询纯属冗余 - 验证方式：真机连 Chrome 远程调试 → 查看元素 computed 样式 → 确认
font-size值与 CSS 声明完全一致
line-height 和 font-family 不同步，clamp() 就白设
字号调准了，但文字仍溢出、换行错位、点击区域变小？大概率是配套属性没跟上。比如 line-height: 20px 在小屏上会把行高锁死，字号缩到 14px 时行高还是 20px，视觉密度爆炸；又比如只写 "PingFang SC"，安卓 fallback 到系统默认字体后，其默认行高可能是字号的 1.8 倍，单行高度直接翻倍。
-
line-height必须用无单位值，如1.5或1.4，确保等比缩放 - 中文字体栈至少写三层：
font-family: "HarmonyOS Sans SC", "PingFang SC", "Noto Sans CJK SC", sans-serif; - 小屏优先用
font-weight: 500～600：300 太细难辨，800 太粗挤压字间距，加重横向溢出风险
最易被忽略的一点：所有这些设置必须在真机上逐台验证，尤其是低端安卓机（如三星 A 系列、华为畅享系列）和鸿蒙设备。它们的渲染引擎、DPR 处理、字体缓存策略都不同，模拟器和高端机测过 ≠ 全线过关。
