ios safari输入框聚焦自动放大是可读性机制，非bug；须确保input等元素最终computed font-size≥16px、box-sizing:border-box，并设-webkit-text-size-adjust:100%，viewport中maximum-scale=1.0且user-scalable=no。
确保 font-size 最终计算值 ≥16px
iOS Safari 会在 <input> 或 <textarea></textarea> 的「最终渲染字号」低于 16px 时自动放大，导致布局跳变。这不是 bug，是它的可读性保护机制。但问题在于：你写的 font-size: 16px 不一定等于最终值。
常见陷阱包括：
-
font-size: 0.875rem+html { font-size: 14px }→ 实际为 12.25px -
font-size: clamp(14px, 4vw, 16px)在小屏下可能回落到 14px -
transform: scale(1.1)不改变字体计算值，只做视觉缩放，Safari 仍按原始字号判断
最稳妥的写法是显式声明 font-size: 16px !important，尤其在使用 Element Plus、Ant Design 等 UI 库时——它们的默认样式常带高优先级，不加 !important 很容易被覆盖。
必须配合 -webkit-text-size-adjust: 100%
仅设 font-size 是不够的。iOS Safari 还会基于文本内容主动干预缩放（比如检测到短 label + 小字号，就强制放大整块区域）。这个行为由 -webkit-text-size-adjust 控制。
正确写法：
input, textarea, select, button {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
注意：-webkit-text-size-adjust: none 已废弃，100% 才是当前标准值；该声明对 Android Chrome 无影响，但不会造成副作用，建议统一加上。
别忽略触控区域与 min-height
字号 ≥16px 只解决放大问题，不等于点击体验好。iOS 推荐最小触控高度是 44px，Android 是 48dp。单纯调高 height 容易截断文字或破坏垂直居中。
推荐组合：
-
min-height: 44px（保底触控尺寸） -
padding: 0.5rem 0.75rem（用 rem 保证缩放一致性） -
box-sizing: border-box（避免 padding 加出意外高度）
如果用了 border 或 outline，记得在计算总高度时一并考虑——浏览器实际可点区域是包含边框在内的整个盒模型。
检查运行时最终值，别信源码声明
Vue 的 v-model、CSS-in-JS（如 Emotion、Styled Components）、甚至某些构建工具的样式提取逻辑，都可能在运行时动态注入或覆盖样式。你写的 font-size: 16px 在 DevTools 的「Styles」面板里看着生效，但在「Computed」面板里可能显示为 14.2px。
验证方法只有一步：打开移动端调试模式（Chrome DevTools → Toggle device toolbar），选中输入框，直接看「Computed」标签页下的 font-size 值。这是唯一可信的数字。
真正容易被绕过的点，是框架内部组件（比如 <el-input></el-input>）把 font-size 写在了内联 style 或 shadow DOM 里——这时候得用 ::part(input) 或深度选择器（如 :deep(.el-input__inner)）去穿透，而不是在父层盲目加权重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
