iOS Safari聚焦放大是因输入框最终渲染font-size＜16px触发的可访问性机制，需确保input、textarea、select、[contenteditable]等所有可聚焦元素的computed font-size≥16px，并配合-webkit-text-size-adjust:100%及viewport中maximum-scale=1.0生效。
为什么写了 font-size: 16px 还是会放大
因为 Safari 不看你的 CSS 声明，只认最终计算出的 font-size 像素值。哪怕你写了 16px，只要继承链或单位换算导致实际渲染值是 15.99px，它就照样放大。
常见踩坑点：
-
html { font-size: 14px }+input { font-size: 1.143rem }→ 算出来是14 × 1.143 = 16.002px，看似够，但某些 iOS 版本浮点截断后变成15.99px - 父容器设了
font-size: 0.875em，子input没重置，继承后直接掉到14px以下 - 用了
clamp(14px, 4vw, 18px)，在 320px 宽屏上4vw = 12.8px，触发放大 - Vant 或 Ant Design Mobile 动态注入内联样式，把你写的
font-size覆盖了
哪些元素必须统一加 font-size: 16px !important
iOS 不只检查 input 和 textarea，所有能唤起键盘的节点都算数。漏掉任何一个，聚焦时都可能失真。
必须覆盖的元素包括：
-
input、textarea -
select（下拉框，常被忽略） -
[contenteditable]（富文本编辑器根节点、div[contenteditable="true"]等） - Vue/React 封装的输入组件（比如
input，需穿透设置）
推荐写法：
input, textarea, select, [contenteditable] {
font-size: 16px !important;
}
input:focus, textarea:focus, select:focus, [contenteditable]:focus {
font-size: 16px !important;
}
-webkit-text-size-adjust: 100% 的真实作用和生效条件
这个属性不是“禁用缩放”，而是告诉 Safari：“别对我已设为 ≥16px 的文本再做二次字号调整”。它单独存在完全无效。
必须满足三个条件才起效：
- 必须和
font-size: 16px同级写在目标元素上，不能只写在body或html - 不能用
none（iOS 10+ 已废弃），100%是唯一稳定取值 - 必须搭配绝对单位（
px或clamp(16px, ..., ...)），避免rem/em引入间接压缩风险
正确组合示例：
input, textarea, select {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
viewport meta 标签里哪些参数真有用
user-scalable=no 单独写等于没写，iOS Safari 会忽略；maximum-scale=1.0 才是关键，且必须和 minimum-scale=1.0 配合。
真正需要保留的参数只有：
-
width=device-width（必需，否则 layout viewport 不对） -
maximum-scale=1.0（核心，阻止自动放大） -
minimum-scale=1.0（配套，防某些旧版本 fallback）
可以删掉的冗余项：
-
initial-scale=1.0（width=device-width已隐含） -
user-scalable=no（不加更安全，避免影响可访问性） -
shrink-to-fit=yes（已废弃，现代 iOS 不识别）
最终推荐写法：
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">
把这行放在 最顶部，防止被框架或插件动态覆盖——这是最容易被忽略的一环，也是真机调试时最常发现的问题根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
