根本原因是safari检查的是computed font-size而非css声明值；常见问题包括rem换算浮点误差（如15.99px）、父级em继承导致缩水、clamp在小屏下低于16px，以及ui库动态覆盖样式。
为什么写了 font-size: 16px 还是放大
不是 CSS 没生效，而是 Safari 看的是最终计算值（computed font-size），不是你写的那行声明。常见掉坑点：
-
html { font-size: 14px }+input { font-size: 1.143rem }→ 实际算出来可能是15.99px，Safari 判为 - 父容器设了
font-size: 0.875em，子input继承后直接掉到14px - 用了
clamp(14px, 4vw, 18px)，小屏下4vw在 320px 宽度上仅12.8px - UI 库（如 Vant）把
font-size写进内联 style，你的 CSS 被覆盖
查「Computed」面板确认真实值，别信源码里写的那行。
input:focus 页面放大时必须同时覆盖的元素和伪类
只写 input 不够，iOS 会检查所有能唤起键盘的元素，且聚焦态不能意外重置字号：
- 必须覆盖：
input、textarea、select、[contenteditable] - 必须加
:focus伪类规则——否则某些框架在 focus 时动态加 class 可能导致字号回落 - 推荐写法：
input, textarea, select, [contenteditable] { font-size: 16px !important; }<br>input:focus, textarea:focus, select:focus, [contenteditable]:focus { font-size: 16px !important; }
-webkit-text-size-adjust: 100% 的正确用法
这个属性不是“禁用缩放”，而是阻止 Safari 对文本做二次字号重计算。它只在 font-size ≥ 16px 时起效，且必须和字号同级写在表单元素上：
- 错：写在
body上 → 正文小字也变难读，且对输入框无效 - 对：和
font-size一起写在目标元素上，例如：input, textarea {<br> font-size: 16px !important;<br> -webkit-text-size-adjust: 100%;<br>} - 单独写
-webkit-text-size-adjust: 100%但没配font-size: 16px，完全不生效
viewport meta 标签只是辅助，不是解药
<meta name="viewport" content="width=device-width, maximum-scale=1.0"> 本身无法拦截聚焦放大：
-
maximum-scale=1.0只约束用户主动缩放行为，不拦截系统自动缩放逻辑 - 缺失
width=device-width会导致 viewport 解析异常，让 scale 设置整体失效 - iOS 15.4+ 对
user-scalable=no处理更宽松，不能依赖它锁死缩放 - 真正起效的是组合策略：CSS 确保字号 ≥16px + JS 动态控制 viewport（聚焦时临时设
maximum-scale=1.0，失焦后恢复）
最常被忽略的一点：所有可聚焦元素的 computed font-size 必须稳定 ≥16px —— 浮点误差、继承链、框架注入样式，任何一个环节松动，放大就回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
