iOS Safari横屏时文字变大是因默认启用-webkit-text-size-adjust:auto，需在html上设text-size-adjust:100%；Android微信X5内核不支持该属性，须用JS桥接处理。
为什么横屏时文字会突然变大
iOS Safari 默认对横屏启用 -webkit-text-size-adjust: auto，它不是改 font-size 值，而是在渲染层强行放大文本块——导致 line-height 失准、Flex 项换行、按钮高度突变、甚至文字发虚。这个行为在 iPhone 全系默认开启，iPad 则默认禁用，所以问题基本只出现在 iPhone 横屏场景。
必须写在 html 或 body 上才生效
只给某个 <div> 或 <p> 加 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 桥接：
- 尽早执行：
<head>里就放初始化代码，不能等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（避免<12px） - iOS 16+ 对前缀拦截更严，
html { text-size-adjust: 100% }必须存在，不能只靠-webkit-版本
横屏错乱最顽固的地方不在 CSS 写法，而在于「谁先渲染、谁后接管」：iOS Safari 在 CSS 解析前就做了渲染层干预，X5 内核则在 JS 执行后才覆盖字体基准。这两套机制互不兼容，必须分层应对，漏掉任一环都会看到闪动或错位。
