这不是 bug，是ios系统级可访问性功能生效：开启“更大字体”后safari会绕过css强制提升根元素font-size，导致rem基准被抬高；应使用text-size-adjust:100%声明适配意图，并配合clamp()弹性定义字号。
iOS Safari「更大字体」辅助设置导致页面文字突兀放大
这不是 bug，是系统级可访问性功能在生效。iOS 设置里开启「更大字体」或「粗体文本」后，Safari 会主动将 body 或根元素的 font-size 提升至 20px、22px 甚至更高，且该行为绕过所有 CSS 声明（包括 :root { font-size: 16px }），直接作用于渲染树。你看到的“字突然变大撑破容器”，本质是浏览器把你的 rem 基准悄悄抬高了。
别在 html 上硬设 font-size，那只会让问题更隐蔽
有人用 试图锁死基准，但这是危险操作：
- 旧版 Safari（iOS 9–11）对
html的font-size解析不稳定，rem计算可能错乱 - 它会强制覆盖用户辅助偏好，违反 WCAG 2.1 AA 级可访问性要求
- 系统缩放 + 辅助字体叠加时，实际生效值可能变成 16px × 1.25 × 1.3 ≈ 26px，完全失控
用 text-size-adjust 主动协商缩放权
现代方案不是“禁止”，而是“声明意图”：告诉浏览器“本页已适配大字体，请勿额外干预”。关键属性是 text-size-adjust，它在 iOS 14+ 和 Android Chrome 89+ 已稳定支持：
:root {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
注意点：
-
100%表示“按原始 CSS 字号渲染”，不是“禁用缩放”——用户仍可通过双指捏合缩放，只是系统不再自动放大正文 - 必须加
-webkit-前缀，Safari 目前仍依赖该私有属性 - 不能写在
body或局部选择器里，必须作用于根元素（:root或html）才生效 - 若页面含大量第三方富文本（如 CMS 输出的
<p></p>），需额外给这些元素也设text-size-adjust: 100%，否则它们仍可能被单独放大
配合 clamp() 做弹性兜底，比固定值更可靠
纯 text-size-adjust 能防系统强拉，但挡不住用户手动缩放。真正稳的组合是：
:root {
font-size: clamp(14px, 0.875rem + 0.25vw, 18px);
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
这样做的逻辑：
-
clamp()让字号随视口宽度平滑变化，在小屏上不小于 14px（保可读），大屏上不大于 18px（防溢出） - 当用户开启「更大字体」时，
clamp()的下限14px会被尊重，不会被系统进一步拉到 22px - 如果项目已用
rem体系，把1rem定义为这个clamp()值，所有基于 rem 的组件（按钮、卡片、表单）都会自然继承这种弹性
最易被忽略的是：这个方案对富文本内容无效——CMS 插入的 <h2></h2> 若没显式继承 font-size，仍可能被系统单独放大。所以，上线前务必用 iOS 真机开启「更大字体」设置跑一遍核心路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
