text-size-adjust: none 不能真正硬性禁用字体缩放,仅阻断浏览器自动干预;它不影响系统字体设置、辅助功能及手动缩放,全站使用会破坏可访问性。

不能真正“硬性禁用”,只能阻断浏览器自动干预;强行用 text-size-adjust: none 会破坏系统字体偏好和辅助功能,生产环境应避免全站使用。
为什么 text-size-adjust: none 不是硬禁用
移动端浏览器(尤其是 Android Chrome 和 iOS Safari)会对小字号、窄行宽的文本块(如页脚链接、单列菜单)主动放大或压缩,这是独立于 CSS 单位的渲染层行为。而 text-size-adjust: none 只是关闭这一“自动修正”,并不影响:
- 用户通过系统设置(如 iOS「更大字体」或 Android「字体大小」)调整全局字号
- 辅助技术(如 VoiceOver 缩放、TalkBack)对文字的响应
- 用户双指手势或浏览器菜单手动缩放页面
真机上测试时,font-size: 1rem 的两个元素在 <header></header> 和 <footer></footer> 中尺寸不一致,大概率就是这个机制在起作用——DevTools 模拟器默认关掉了它,所以你看不到问题。
text-size-adjust: 100% 是更安全的默认选择
它允许用户按需缩放(满足 WCAG 1.4.4),同时禁止浏览器擅自干预,是目前推荐的平衡点:
立即学习“前端免费学习笔记(深入)”;
- 必须加前缀以兼容旧版:
-webkit-text-size-adjust: 100%、-moz-text-size-adjust: 100%、-ms-text-size-adjust: 100% - 作用域要够大:写在
html或body上才生效,局部容器(如.menu)也得确保父级没覆盖 - 微信 WebView 特别要求:iOS 微信里需加
!important,且必须作用在body上,否则容易被内联样式或第三方库覆盖
只对特定区域局部禁用自动缩放
若导航栏、图标文字、徽标等 UI 元素必须严格控制尺寸,可精准应用,而非全站粗暴重置:
- ✅ 推荐写法:
nav a, .menu-item, .icon-label { text-size-adjust: none; } - ❌ 避免写法:
* { text-size-adjust: none; }—— 违反可访问性,且 iOS/Android 系统字体设置完全失效 - 验证方式:真机远程调试 → Computed 面板搜索
text-size-adjust,确认值为none或100% - 注意干扰项:父级设置了
transform、zoom或font-size百分比继承链,可能叠加影响最终渲染
微信环境需要额外 JS 配合
iOS 微信认 CSS,但 Android 微信根本不走这条路径,必须用 WeixinJSBridge:
- iOS 微信:靠
body { -webkit-text-size-adjust: 100% !important; }就能锁住 - Android 微信:必须监听
menu:setfont事件,并调用WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})重置 - 就绪时机关键:WeixinJSBridge 不是立即可用,需监听
WeixinJSBridgeReady事件再执行回调
复杂点在于:CSS 控制的是“缩放行为”,而 JS 控制的是“字号基准”。两者要配合,否则 rem 动态计算 + 微信字体重设会互相打架。最易忽略的是 Android 微信里漏掉回调监听,导致用户手动调大字体后,页面文字直接失控。



















