text-size-adjust: 100% 必须写在 html 元素上且配合正确 viewport 标签才生效;否则 ios 横屏文字仍会异常放大,因浏览器退化为桌面模式或内核忽略该属性。

直接结论:text-size-adjust: 100% 必须写在 html 元素上,且 <meta name="viewport"> 缺失或写错,这个声明就完全不生效。
为什么 text-size-adjust 写了却没用?
常见错误现象:加了 body { text-size-adjust: 100%; } 或 p { -webkit-text-size-adjust: 100%; },但 iOS 横屏时文字依然突然变大,DevTools 的 Computed 面板里 text-size-adjust 值仍是 auto。
- viewport 标签缺失、位置靠后,或写了
width=375这类固定值 → 浏览器退化为桌面渲染模式,text-size-adjust被忽略 - 属性写在
p、span、a等内联/文本元素上 → 它只作用于块级祖先容器,不是文本本身 - 用了通配符
* { text-size-adjust: 100%; }→ 旧版 Safari 可能忽略,还可能误伤input、select等表单控件 - 没加前缀 → iOS Safari 目前仍主要认
-webkit-text-size-adjust,标准属性text-size-adjust在 Safari 16.4+ 才稳定支持
怎么写才真正生效?
最稳妥的全局写法:
html {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100%;
}
关键点:
- 必须作用于
html,确保覆盖所有动态插入的节点 -
!important要加 —— 微信等 WebView 可能注入样式覆盖你写的规则 - 两个声明都写:前缀版保 iOS Safari 兼容性,标准版面向未来
- 局部控制(如底部菜单)可加在包裹它的
<div class="footer"> 上,别跳过一级直接写到 <code>bodyAndroid 微信 X5 内核根本不管
text-size-adjust现象:
getComputedStyle(document.documentElement).webkitTextSizeAdjust返回空字符串"",说明属性被内核直接忽略。这不是你 CSS 写得不对,是腾讯 X5 内核压根不解析这个属性。此时必须 JS 桥接:
- 尽早执行:
<script></script>放在里,不能等DOMContentLoaded - 监听
WeixinJSBridgeReady,再调用WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0}) - 还要监听
menu:setfont事件,防止用户手动点「调整字体」菜单再次触发 - 部分华为 EMUI 等定制 ROM 会绕过桥接,需 fallback 到
window.matchMedia('(min-resolution: 2dppx)')+ 动态重设html的font-size
别忘了真机验证和可访问性权衡
text-size-adjust: none会彻底禁用系统级字体调节(如 Android 设置里的「字体大小」滑块),影响低视力用户。生产环境优先用100%—— 它允许用户缩放,只禁掉浏览器的自动启发式放大。真机测试不可跳过:DevTools 响应式预览默认禁用自动缩放,模拟不出横屏/键盘弹出/系统字体设置变更等真实场景。iOS 上尤其明显,比如导航栏文字在横屏瞬间变大,就是
text-size-adjust没生效的典型信号。最容易被忽略的是 viewport 和
text-size-adjust的耦合关系:缺一不可。哪怕只漏掉initial-scale=1.0,或者把它单独写成一行而不跟width=device-width同时存在,整个方案就归零。 - 尽早执行:











