iOS Safari 在表单元素聚焦时强制放大视口是可访问性功能，需同时满足：viewport meta 标签置于 head 顶部、元素显式设 font-size: 16px !important、且必须含 :focus 伪类；computed 值低于 16px 即触发，CSS 无法拦截，只能通过精确控制字号规避。
input:focus 时整个页面放大，不是 bug 是 iOS 可访问性逻辑
iOS Safari 在 input、textarea、select 或带 contenteditable 的元素聚焦时，会硬编码检查其最终渲染的 font-size。只要小于 16px（注意：是 computed 值，不是你写的声明），就强制放大视口——这不是缩放 bug，是系统级行为，CSS 无法拦截，只能绕过。
必须同时满足的三个硬条件
缺一不可，且顺序和写法都影响生效：
-
必须放在最顶部，不能 JS 动态注入，也不能被框架（如 Cordova/Ionic/Vue 插件）覆盖 -
input、textarea、select、[contenteditable]必须显式设font-size: 16px !important，不能只写input；用rem/em很危险，浮点误差或父级缩放可能让最终值掉到15.99px - 必须加
:focus伪类规则，否则某些 UI 库（如
常见踩坑点：写了 16px 还放大？查 computed 值
别信源码里写的那行 CSS，直接看浏览器开发者工具的「Computed」面板：
-
html { font-size: 14px }+input { font-size: 1.143rem }→ 实际 ≈15.99px，仍触发放大 - UI 库内联 style 设置了
font-size: 14px，你的 CSS 被覆盖，得用更强选择器：input:not([type="hidden"]) !important -
clamp(14px, 4vw, 16px)在 320px 屏宽下4vw = 12.8px，下限不保 -
-webkit-text-size-adjust: none已废弃，iOS 10+ 不生效；要用-webkit-text-size-adjust: 100%，且必须和font-size: 16px同级写在表单元素上
Vue/React 项目里样式容易失效的真相
框架组件常在 mounted 阶段动态注入样式，或用 CSS-in-JS 生成高优先级 class：
-
内部用内联 style 设了font-size，最快验证方式是直接加style="font-size: 16px !important" - 全局 reset.css（如 normalize.css）可能默认设了
input { font-size: 14px; }，得用!important覆盖 - 某些富文本编辑器（如 Tiptap）根容器是
div[contenteditable]，漏写它照样放大
真正难缠的是计算精度和动态覆盖——哪怕你写对了所有规则，只要 computed font-size 在某次渲染中掉到 16px 以下，放大就立刻触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
