怎样解决CSS text-size-adjust在移动端横屏切换时的字号异常-css教程-PHP中文网

iOS Safari横屏时文字变大是因默认启用-webkit-text-size-adjust:auto，需在html上设text-size-adjust:100%；Android微信X5内核不支持该属性，须用JS桥接处理。

怎样解决css text-size-adjust在移动端横屏切换时的字号异常

为什么横屏时文字会突然变大

iOS Safari 默认对横屏启用 -webkit-text-size-adjust: auto，它不是改 font-size 值，而是在渲染层强行放大文本块——导致 line-height 失准、Flex 项换行、按钮高度突变、甚至文字发虚。这个行为在 iPhone 全系默认开启，iPad 则默认禁用，所以问题基本只出现在 iPhone 横屏场景。

必须写在 `html` 或 `body` 上才生效

只给某个

 或  加 text-size-adjust: 100% 完全无效。浏览器只检查文本的**最近祖先容器**是否设置了该属性，且必须是能影响整个页面文本流的根级元素：

html { text-size-adjust: 100%; -webkit-text-size-adjust: 100% !important; } 是最稳妥写法
补上 -moz-text-size-adjust 和 -ms-text-size-adjust 没坏处，但实际只在极老 Android 浏览器里起作用
别用 * { text-size-adjust: 100% } —— 性能差，且部分旧版 Safari 会忽略通配符规则

Android 微信 X5 内核根本不认 -webkit-text-size-adjust

你在 Android 微信里加 body { -webkit-text-size-adjust: 100% !important; }，查 getComputedStyle(document.body).webkitTextSizeAdjust 会返回空字符串，说明内核压根不解析这个属性。这不是写法问题，是 X5 不支持。此时必须靠 JS 桥接：

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										

尽早执行： 里就放初始化代码，不能等 DOMContentLoaded

调用 WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})，其中 0 表示“恢复系统默认字号”，不是“最小字号”
监听 menu:setfont 事件，防止用户手动点微信菜单再次触发放大
华为 EMUI 等定制 ROM 可能绕过桥接，需 fallback 到 window.matchMedia('(min-resolution: 2dppx)') + 动态重设 font-size



text-size-adjust: none 的真实代价
虽然 none 能彻底禁用自动缩放，但它也会让低视力用户无法使用系统级“增大文字”设置，可访问性直接归零。MDN 明确标注该值在生产环境应避免。更现实的做法是：

用 text-size-adjust: 100%：允许用户缩放，但禁止浏览器擅自干预
配合固定 line-height（如 line-height: 1.4）和合理 font-size（避免 ）

iOS 16+ 对前缀拦截更严，html { text-size-adjust: 100% } 必须存在，不能只靠 -webkit- 版本

横屏错乱最顽固的地方不在 CSS 写法，而在于「谁先渲染、谁后接管」：iOS Safari 在 CSS 解析前就做了渲染层干预，X5 内核则在 JS 执行后才覆盖字体基准。这两套机制互不兼容，必须分层应对，漏掉任一环都会看到闪动或错位。