CSS如何解决iOS横屏时字体自动缩放的问题_设置-webkit-text-size-adjust为100%-css教程-PHP中文网

iOS横屏时字体变大是Safari默认启用-webkit-text-size-adjust: auto导致的自适应行为，iPhone全系默认开启，解决方法是全局设置html, body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}。

css如何解决ios横屏时字体自动缩放的问题_设置-webkit-text-size-adjust为100%

为什么iOS横屏时字体突然变大

iOS Safari 默认对横屏应用启用文本自适应算法，核心就是 -webkit-text-size-adjust: auto。它不是 bug，而是 Safari 为“可读性”做的妥协：检测到横屏后，会悄悄把页面内文字放大（尤其在或未设 font-size 的块级元素里），导致布局错位、按钮变小、文字溢出。iPhone 全系默认开启，iPad 则默认 none——所以这个问题基本只出现在 iPhone 横屏场景。

直接设 `-webkit-text-size-adjust: 100%` 就够了吗

够，但得加对位置和条件：

必须写在全局生效的 CSS 规则里，比如 html、body 或通配符 *；仅作用于某个 不起效
要覆盖掉可能存在的更高优先级声明（比如框架自带的 reset.css 里写了 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 行为
设成 none 会怎样
技术上能彻底禁用自动缩放，但不推荐：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										

部分 macOS Safari（特别是老版本）会因此失去用户手动缩放文字的能力，影响辅助功能可用性
iPad 上默认就是 none，但 iPhone 用户习惯通过系统「显示与文字大小」调节全局字号，设 none 会绕过这个链路
实测 iOS 17+ 对 none 的处理已较稳定，但为了兼容性及 WCAG 合规，仍应优先选 100%


还要注意这些边界情况
光靠 CSS 还不够，得配合页面结构和系统行为：

如果用了 rem 单位且根元素 font-size 是 JS 动态计算的（比如根据屏幕宽度），横屏时 document.documentElement.clientWidth 突然变大，可能导致 rem 基准跳变——这时要监听 orientationchange 或 resize 重新计算
某些富文本编辑器（如 Quill、Tiptap）会在内联样式里硬编码 font-size，CSS 层面的 -webkit-text-size-adjust 对它们无效，得单独处理容器样式
微信内置浏览器（X5 内核）对这个属性支持不稳定，建议在 UA 检测到 MicroMessenger 时额外加一层 zoom: 1 或强制重绘



实际最简可靠的写法就是：

html, body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

别漏 !important，也别指望它能解决所有字体异常——它只管 Safari 的自动缩放逻辑，不管系统级文字缩放、JS 动态样式或第三方组件的私有行为。