横屏时文字突然变大是iOS Safari等浏览器的可读性优化机制，并非bug；需在html上设置-webkit-text-size-adjust:none和text-size-adjust:none并配合viewport限制缩放来禁用。
横屏时文字突然变大是浏览器的默认行为
这不是 bug，而是 iOS Safari 和部分安卓浏览器的“可读性优化”机制：当检测到页面宽度变宽（比如手机横屏），它会自动放大文本，防止用户眯眼阅读。这个行为独立于你的 CSS，font-size 值没变，但渲染结果被浏览器劫持了。
用 text-size-adjust 禁用它
直接在全局样式里加这四行，覆盖所有主流内核：
html {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
注意点：
-
text-size-adjust: none是标准属性，但 Safari 直到 iOS 17 才完全支持，所以必须保留-webkit-前缀 - 不能只写在某个 class 或元素上，必须作用于
html或body，否则无效 - 某些安卓 WebView（如旧版微信）仍可能忽略该声明，需配合
viewport的user-scalable=no双重保险（但慎用，影响无障碍）
为什么只靠媒体查询或 clamp() 解决不了这个问题
因为文字放大发生在 CSS 渲染之后——浏览器先算出 font-size: clamp(16px, 4vw, 24px) 的结果，再额外叠加一层缩放。你看到的“变大”，是两层效果叠加的结果，调试时在 DevTools 的 Computed 面板里能看到最终值比预期高 10%~20%。
常见误判场景：
- 写了
@media (orientation: landscape)并调小font-size，但文字还是变大 → 实际是浏览器放大盖过了你的降级逻辑 - 用
rem+ 根字号缩放，横屏时:root没变，但文字视觉尺寸暴涨 → 同样是浏览器干预
真机测试时最容易漏掉的验证点
模拟器里开横屏看不出问题，因为 Chrome DevTools 不模拟这个行为。必须用真机：
- iOS 设备：Safari 打开页面，从竖屏转横屏，观察标题/正文是否跳变
- 安卓微信：打开页面后双指缩放一次再还原，触发 WebView 的重排逻辑，此时最易暴露未生效的
text-size-adjust - 如果用了第三方 UI 库（如 Ant Design Mobile），检查它是否在内部重置了
html的text-size-adjust，你的全局样式可能被覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
