必须确保输入框最终渲染的 font-size ≥ 16px，否则仅靠 viewport 或 -webkit-text-size-adjust 都无法阻止 ios safari 自动放大；需用 safari 开发者工具验证 computed font-size 确为 ≥16px（非声明值），并覆盖 input、textarea、select、[contenteditable] 及其 :focus 状态，配合 viewport minimum-scale=1.0、maximum-scale=1.0 和同级 -webkit-text-size-adjust: 100%。
必须确保输入框最终渲染的 font-size ≥ 16px，否则仅靠 viewport 或 -webkit-text-size-adjust 都无法阻止 iOS Safari 自动放大。
检查 computed font-size 是否真 ≥16px
写了 font-size: 16px 不代表生效——Safari 看的是「计算后值」，不是你写的那行 CSS：
- 用 Safari 开发者工具（真机连接或模拟器）选中
input，在「Computed」面板里直接查font-size值，确认是16px或更大（不能是15.996px） -
html { font-size: 14px }+input { font-size: 1.143rem }→ 实际 ≈ 15.996px，仍会触发放大 - 父容器设了
font-size: 0.875em，子input继承后掉到 14px，就失效 - 用了
clamp(14px, 4vw, 16px)，在 320px 宽度下4vw = 12.8px，风险极高
覆盖所有可能触发放大的元素
iOS Safari 不只检查 input，只要能唤起键盘，都算：
- 必须同时写
input、textarea、select、[contenteditable] - 必须加
:focus伪类，防止某些框架（如 Vue 的<van-field></van-field>）在聚焦时动态加 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>}
搭配 -webkit-text-size-adjust 和 viewport 才完整
-webkit-text-size-adjust: 100% 不是万能开关，它只在字号 ≥16px 时起作用：
- 必须和
font-size: 16px同级写在表单元素上，不能只写在body上 -
viewport必须包含minimum-scale=1.0, maximum-scale=1.0，且<meta>标签要放在最顶部，不能 JS 动态注入 - 不要用
user-scalable=no单独控制——iOS 16+ 已部分忽略它，但maximum-scale=1.0仍有效 - 示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
UI 库项目里最容易失效的场景
Ant Design Mobile、Vant 等组件库常通过内联样式或高优先级 class 覆盖你的规则：
-
<van-field style="font-size: 14px"></van-field>会直接压过普通 CSS，得用更强选择器，比如：van-field input:not([type="hidden"]) {<br> font-size: 16px !important;<br>} - React/Vue 中 CSS-in-JS 或 scoped style 可能导致规则未挂载到 DOM，建议在 mounted/useEffect 后手动验证 computed 值
- 避免用
rem/em控制输入框字号——根字号被动态修改（如某些适配方案设为10px）会导致连锁失效
真正难搞的从来不是写几行 CSS，而是查清继承链、验证 computed 值、防住框架动态覆盖。别信“我写了 16px”，打开真机调试器看一眼 font-size 的最终像素值，才是唯一靠谱的判断依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
