iOS横屏时字体变大是Safari默认启用-webkit-text-size-adjust: auto导致的自适应行为，iPhone全系默认开启，解决方法是全局设置html, body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}。
为什么iOS横屏时字体突然变大
iOS Safari 默认对横屏应用启用文本自适应算法，核心就是 -webkit-text-size-adjust: auto。它不是 bug，而是 Safari 为“可读性”做的妥协：检测到横屏后，会悄悄把页面内文字放大（尤其在 或未设 font-size 的块级元素里），导致布局错位、按钮变小、文字溢出。iPhone 全系默认开启，iPad 则默认 none——所以这个问题基本只出现在 iPhone 横屏场景。
直接设 -webkit-text-size-adjust: 100% 就够了吗
够，但得加对位置和条件：
- 必须写在全局生效的 CSS 规则里，比如
html、body或通配符*；仅作用于某个<div> 不起效 <li>要覆盖掉可能存在的更高优先级声明（比如框架自带的 reset.css 里写了 <code>auto）；建议加!important保底：-webkit-text-size-adjust: 100% !important; - 不能只写现代写法；需补全兼容旧版 iOS：
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;（后者是标准属性，Safari 9+ 支持） - 如果页面用了
viewport缩放控制，确保没冲突：user-scalable=no会禁用双指缩放，但不影响-webkit-text-size-adjust行为 - 部分 macOS Safari（特别是老版本）会因此失去用户手动缩放文字的能力，影响辅助功能可用性
- iPad 上默认就是
none，但 iPhone 用户习惯通过系统「显示与文字大小」调节全局字号，设none会绕过这个链路 - 实测 iOS 17+ 对
none的处理已较稳定，但为了兼容性及 WCAG 合规，仍应优先选100% - 如果用了
rem单位且根元素font-size是 JS 动态计算的（比如根据屏幕宽度），横屏时document.documentElement.clientWidth突然变大，可能导致 rem 基准跳变——这时要监听orientationchange或resize重新计算 - 某些富文本编辑器（如 Quill、Tiptap）会在内联样式里硬编码
font-size，CSS 层面的-webkit-text-size-adjust对它们无效，得单独处理容器样式 - 微信内置浏览器（X5 内核）对这个属性支持不稳定，建议在 UA 检测到
MicroMessenger时额外加一层zoom: 1或强制重绘
设成 none 会怎样
技术上能彻底禁用自动缩放，但不推荐：
还要注意这些边界情况
光靠 CSS 还不够，得配合页面结构和系统行为：
立即学习“前端免费学习笔记（深入）”；
html, body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
别漏 !important，也别指望它能解决所有字体异常——它只管 Safari 的自动缩放逻辑，不管系统级文字缩放、JS 动态样式或第三方组件的私有行为。
