text-size-adjust 必须写在 html 或 body 上才生效，单独作用于 p、div 或 class 无效；ios safari 的自动放大是渲染层行为，仅响应根级容器声明；推荐写法为 html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }。
text-size-adjust 必须写在 html 或 body 上才生效
单独给 p、div 或某个 class 加 text-size-adjust: 100% 没用。iOS Safari 的自动放大是渲染层行为，绕过 CSS cascade，只响应根级容器的声明。写在 html 上兼容性最稳（Safari 16.4+ 支持标准属性），写在 body 上对老版本更保险。
不要写在 :root 或自定义 wrapper 元素里——部分 Android WebView 和微信 X5 内核根本不识别伪根或深层容器上的该声明。
推荐写法：
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
注意：-moz-text-size-adjust 已无必要，Firefox for Android ≥ 68 已支持标准属性；-ms-text-size-adjust 可省略，Edge 已弃用旧前缀。
为什么不能用 none 值
text-size-adjust: none 在 iOS 13.3–14.2 中会导致 input 失去双击放大能力，用户无法选中/编辑小字号输入框；iOS 16+ 更是直接忽略该值。Android Chrome 虽支持 none，但它会彻底禁用系统字体设置（如“增大文字”），违反 WCAG 可访问性要求。
100% 是唯一兼顾稳定性和可访问性的取值：它允许用户通过系统设置缩放文本，但阻止浏览器擅自重算行盒高度。
常见错误：
- 用
none后发现微信里 input 点击无反应 - 上线后收到低视力用户投诉“字变不更大了”
- 在 iOS 17 模拟器中
getComputedStyle(el).textSizeAdjust返回""，说明被静默忽略
仅设 text-size-adjust 不足以解决问题
这个属性只是“最后一道防线”，真正触发放大行为的是最终渲染字号是否 。哪怕你写了 <code>text-size-adjust: 100%，只要计算后 font-size 小于 16px（比如 rem 基准设为 12px，再乘以 1.2 = 14.4px），iOS 仍可能干预。
必须配合以下任一做法：
-
input、textarea、select等表单控件显式声明font-size: 16px（必须是px或clamp()这类绝对单位） - 全局根字体设为
font-size: 16px，避免 rem 计算落入临界区间 - 对确实需要小字号的场景（如版权信息），改用
transform: scale(0.8)+transform-origin微调，而非硬压font-size: 12px
别忘了加 !important —— 尤其在使用 Vant、Ant Design Mobile 等 UI 库时，它们的样式优先级常高于你的重置规则。
Android 微信 X5 内核根本不认 text-size-adjust
在 Android 微信里执行 getComputedStyle(document.body).webkitTextSizeAdjust，返回值是空字符串 ""，不是 "100%"。这不是你写错了，是 X5 内核压根不解析这个 CSS 属性。
必须用 JS 补救：
if (typeof WeixinJSBridge !== 'undefined') {
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 });
}
这段代码要放在 里尽早执行，DOMContentLoaded 之前就得跑。否则页面先错位再修正，用户会看到明显抖动。
额外注意：华为 EMUI 等定制 ROM 可能绕过 WeixinJSBridge，需 fallback 到 window.matchMedia('(min-resolution: 2dppx)') 检测高倍屏 + 动态重设 html 的 font-size。
最易被忽略的一点：viewport meta 标签缺失或 user-scalable=yes 会放大问题。text-size-adjust 只管文本，不管视口缩放——两者必须同时控制，否则 layout shift 依然会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
