Safari会因元素最终渲染font-size＜16px而自动放大，需对input、textarea等聚焦元素强制设font-size:16px!important并配-webkit-text-size-adjust:100%，viewport必须静态声明width=device-width且含user-scalable=no。
为什么写了 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 值——不是源码，是渲染结果。
哪些元素必须统一设置 font-size: 16px
iOS 会检查所有能唤起键盘的元素，漏一个都可能放大：
-
input、textarea、select - 带
contenteditable属性的容器（如富文本编辑器根节点） - 某些框架封装的输入组件（比如 Vue 的
v-model绑定的div[contenteditable]）
推荐兜底写法（必须含 :focus）：
立即学习“前端免费学习笔记（深入）”；
input, textarea, select, [contenteditable] {
font-size: 16px !important;
}
input:focus, textarea:focus, select:focus, [contenteditable]:focus {
font-size: 16px !important;
}
不加 :focus 会导致某些框架在聚焦时动态加 class，把字号又拉回去了。
-webkit-text-size-adjust: 100% 怎么写才生效
这个属性不是“禁用缩放”，而是告诉 Safari：别对文本做二次字号重计算。但它只在 font-size ≥ 16px 时才起效，且必须和 font-size 同级写在目标元素上：
- ❌ 错：写在
body或html上 → 正文小字也变难读 - ✅ 对：
input, textarea { font-size: 16px !important; -webkit-text-size-adjust: 100%; } - ❌ 别用
none：iOS 10+ 已废弃，部分版本反而失效；100%是唯一稳妥值
它只是“防守型”补丁，真正起决定作用的是计算后字号是否 ≥16px。
viewport meta 标签必须怎么配
user-scalable=no 单独写无效，iOS Safari 会忽略它。必须搭配 width=device-width，且不能动态注入：
- ✅ 正确：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - ❌ 错误：JS 动态修改
content值 → Safari 可能不响应或延迟响应 - ⚠️ 注意：
viewport-fit=cover在 iPhone X 及以上机型中建议加上，避免安全区域遮挡
复杂点在于：很多 UI 库会在 mounted 阶段动态插入样式或覆盖你写的规则，所以 !important 和 :focus 双保险不是可选项，是必选项。
