text-size-adjust 应加在 html 或块级容器上才生效，因浏览器只检查最近块级祖先的计算样式；p、span 等内联元素无效，div 若非 display: block 也不触发。
text-size-adjust 该加在哪个元素上才生效
加在 html 或文本所在块级容器上，不是加在 p、span 这类内联元素上——浏览器只检查文本“渲染上下文”的计算样式，而这个上下文由最近的块级祖先决定。
常见失效写法：p { text-size-adjust: 100%; }，因为 p 自身不是上下文根；div 若没设 display: block（比如被 display: inline 覆盖）也可能不触发。
- 推荐写法：
html { text-size-adjust: 100%; }，确保全站文本上下文统一 - 精准控制写法：
.menu, .footer-nav { text-size-adjust: none; }，只约束易被缩放干扰的导航区域 - 避免写
* { text-size-adjust: 100%; }，通配符性能差，且对 SVG 文本等非预期节点可能副作用
text-size-adjust: none 和 100% 的实际区别
text-size-adjust: none 会切断浏览器所有自动缩放逻辑，包括系统级字体偏好响应；text-size-adjust: 100% 允许用户通过系统设置（如 iOS「更大字体」、Android「字体大小」）放大文字，但禁止浏览器基于启发式规则擅自调整。
- 真机验证：开启系统「更大字体」后，
none下文字完全不动，100%下仍等比放大 - 可访问性合规：
none违反 WCAG 1.4.4（Resize Text），100%是推荐值 - 兼容性：
100%在 Chrome 90+、Safari 15.4+、Firefox for Android 均无需前缀；none在旧版 Safari 需-webkit-text-size-adjust: none
微信环境下的特殊处理必须双管齐下
iOS 微信用 CSS 就能干预，Android 微信必须靠 JS 回调，二者缺一不可。只写 CSS，在 Android 微信里基本无效。
立即学习“前端免费学习笔记（深入）”；
- iOS 微信：必须对
body加-webkit-text-size-adjust: 100% !important，且需!important—— 微信 WebView 容易覆盖外部样式 - Android 微信：必须监听
WeixinJSBridgeReady，然后调用WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})，否则用户点右上角「调整字体」后，页面立刻失准 - 不要漏掉
menu:setfont事件监听，这是用户手动调整后的二次重置关键点
为什么 DevTools 里看不出问题，真机却明显不一致
Chrome DevTools 的响应式模拟器默认禁用自动文本缩放机制，所以你看到的 font-size: 1rem 渲染是“干净”的；而真实 Android Chrome（尤其高 PPI 屏）会基于行宽、字号、容器密度主动放大或压缩文本——footer 里小字号链接常被“压缩”，main 里大段正文反而被“放大”，造成视觉错位。
- 典型现象：相同
font-size的两个a标签，一个在header正常，一个在footer明显偏小 - 验证方式：用 Chrome 远程调试真机，打开 Computed 面板搜索
text-size-adjust，确认是否生效 - 干扰因素：父级
transform、zoom或百分比font-size继承链可能叠加影响，但根源仍是text-size-adjust缺失
实际生效的关键不在属性本身多复杂，而在它是否作用于正确的上下文节点、是否覆盖了微信等封闭环境的双重干预逻辑、是否在可访问性与一致性之间做了明确取舍。这些点一旦漏掉一个，真机表现就和预想差很远。
