safari会放大字体是因为其仅依据最终计算出的font-size像素值是否≥16px来判断，而非css声明本身；需确保input、textarea等可聚焦元素在computed中稳定≥16px，并配合-webkit-text-size-adjust: 100%同级声明。
为什么写了 font-size: 16px 还会放大
因为 Safari 不看你写的 CSS 声明，只看最终计算出的 font-size 像素值是否 ≥16px。常见失效场景包括：
-
html根元素设了font-size: 14px，再用input { font-size: 1.143rem }→ 实际 ≈ 15.99px（浮点误差触发放大） - 父容器有
font-size: 0.875em，子input未重置 → 继承后掉到 14px 以下 - 用了
clamp(14px, 4vw, 18px)，在 320px 宽度下4vw = 12.8px - Vant/Ant Design Mobile 等 UI 库动态注入内联样式，覆盖你写的
font-size
真机调试时必须打开 Safari 开发者工具，选中输入框，直接看 Computed 面板里的 font-size 值——不是源码，是渲染结果。
input、textarea、select 和 [contenteditable] 都要设
iOS 会检查所有能唤起键盘的元素，漏掉任何一个都可能放大。比如富文本编辑器根节点、Vue 封装的 v-model 绑定的 div[contenteditable]，都得覆盖。
- 必须加
:focus伪类：某些框架在 focus 时动态加 class，导致字号回落 - 推荐写法：
input, textarea, select, [contenteditable] {<br> font-size: 16px !important;<br>}<br>input:focus, textarea:focus, select:focus, [contenteditable]:focus {<br> font-size: 16px !important;<br>} - 不要只靠
!important撑着——它防不住 JS 动态插入的内联样式，得配合开发者工具验证最终值
-webkit-text-size-adjust: 100% 必须和 font-size 同级写
这个属性不是“禁用缩放”，而是阻止 Safari 对文本做二次重计算。它只在 font-size ≥ 16px 时才生效，且必须作用于具体元素上。
- 错：写在
body或html上 → 正文小字也变难读 - 对：和
font-size同级声明：input, textarea {<br> font-size: 16px !important;<br> -webkit-text-size-adjust: 100%;<br>} - 别用
none：iOS 10+ 已废弃，部分版本反而失效；100%是唯一稳妥值
viewport 的 user-scalable=no 不能替代 font-size
<meta name="viewport" content="... user-scalable=no"> 单独写无效，iOS 16+ 已部分忽略该行为，尤其在聚焦瞬间。
- 必须搭配
maximum-scale=1.0才可能起效，但仍有竞态风险（JS 监听 focus 比 meta 修改慢几毫秒） - 禁用缩放会彻底锁死用户双指操作，损害可访问性
- 真正稳定的是让浏览器“觉得没必要放大”——也就是确保所有可聚焦元素的 computed
font-size稳定 ≥16px
最容易被忽略的，是字号在继承链、rem/em 计算、甚至 transform 缩放后的实际像素值。不查 Computed，光改 CSS 就像蒙眼调参。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
