text-size-adjust 是 iOS Safari 中默认启用的 CSS 属性，会强制放大小于约 16px 的文字，导致布局错位、行高异常；应设为 -webkit-text-size-adjust: 100% 并配合固定 line-height 与合理 font-size 精确控制排版。
text-size-adjust 是 iOS Safari（及所有基于 WebKit 的移动端浏览器）中一个被长期低估但实际影响巨大的 CSS 属性。它默认开启，会强制放大「过小」的文字以提升可读性——这在横屏阅读或表单输入时很友好，但在精确排版、设计稿还原、H5 活动页里，常常导致文字突然变大、布局错位、行高崩塌、甚至触发 font-size 重算。
为什么 iOS 上文字会“自己变大”
当页面未声明 viewport 的 user-scalable=no 或未设合适的 initial-scale 时，iOS Safari 会检测到字体小于某个阈值（通常约 16px），自动将该文本块整体缩放 —— 这不是 CSS 放大，而是渲染层的 viewport 级别干预，font-size 值本身没变，但视觉尺寸和行高都变了，且可能破坏 flex 布局比例、导致 line-height 计算失准。
典型现象包括：
- 同一段
font-size: 14px在 iOS 上比 Android 高出 1–2px，且行距不一致 - 按钮内文字垂直居中失效，看起来“上浮”
- H5 页面在微信内嵌 WebView 中文字突然模糊、发虚（缩放后 bitmap 渲染劣化）
用 text-size-adjust 关闭自动缩放
最直接有效的写法是：
立即学习“前端免费学习笔记（深入）”；
html {
-webkit-text-size-adjust: 100%;
}
注意三点：
- 必须带
-webkit-前缀，标准属性text-size-adjust在 iOS Safari 中仍不识别 - 值推荐用
100%，而非none——none在部分 iOS 版本（如 13.3–14.2）中会导致 input 输入框失去缩放能力，用户双击无法放大选中文本 - 作用域建议写在
html上，避免漏掉动态插入的节点；若只针对某段文字，可用.text-safe { -webkit-text-size-adjust: 100%; }
兼容性与副作用要盯住
iOS 13+ 已基本稳定支持 -webkit-text-size-adjust: 100%，但仍有细节差异：
- iOS 15.4+ 开始，某些 WKWebView 实例（如企业内嵌页）可能忽略该声明，需配合
viewport补充：viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" - 关闭后，小字号文本（如
12px）在弱视用户场景下可读性下降 —— 若项目需 WCAG 合规，应保留最小字号底线（建议 ≥14px），而非依赖缩放兜底 - 部分老版本微信（8.0.22 之前）的 X5 内核不遵循该规则，需额外 JS 检测：
if (navigator.userAgent.includes('iPhone')) document.documentElement.style.webkitTextSizeAdjust = '100%';
别忘了和 font-size + line-height 联动校准
关掉 text-size-adjust 只是第一步。iOS 字体度量（ascent/descent/line-height）和 Android 或桌面端存在固有差异，尤其在 SF Pro 字体下：
-
font-size: 16px的实际行高可能是20.8px（非整数），而 Android Roboto 常为20px - 若用
line-height: 1.5，iOS 渲染结果可能比预期高 0.2–0.3px，多行叠加后偏移明显 - 建议统一用固定
line-height: 20px或line-height: 1.25（避开 1.5 这类易触发小数计算误差的值）
真正稳定的排版，从来不是靠单一属性解决的 —— 它需要 -webkit-text-size-adjust 锁定缩放行为，再用明确的 line-height 和足够安全的 font-size 共同锚定基线。否则，你改了十处样式，最后发现只是 iOS 在背后悄悄帮你“优化”了一把。
