移动端表单输入触发视口缩放的根源是 Safari 等浏览器在 input 获焦且计算字号＜16px 时强制放大视口；解决需三要素：精确 viewport meta、input 等元素 font-size≥16px、-webkit-text-size-adjust: 100%。
移动端表单输入触发视口缩放的根源
根本原因不是字体小，而是 Safari（及部分 Android WebView）在 <input> 获得焦点时，若其计算后字号 ，会自动放大视口以“方便阅读”——这行为无法用 CSS 字体大小覆盖，是浏览器硬编码的兜底逻辑。
常见错误现象：font-size: 14px 的 <input> 点击后页面突然变大、横向滚动出现、布局错位；zoom 或 transform: scale() 无效；user-scalable=no 在 iOS 10+ 已被忽略。
强制禁用自动缩放的 meta 配置
必须在 中设置精确的 viewport，且不能遗漏关键参数：
-
width=device-width必须存在，否则initial-scale失效 -
minimum-scale=1.0和maximum-scale=1.0缺一不可，仅设user-scalable=no不起作用 -
initial-scale=1.0显式声明，避免某些 Android 机型 fallback 到旧规则
正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
立即学习“前端免费学习笔记（深入）”；
input 元素必须满足最小字体阈值
即使设置了 viewport，只要 <input> 渲染后计算字号 ，Safari 仍会强行放大。解决方式不是“调大字体”，而是确保它「算出来 ≥ 16px」：
- 避免用
rem或em设置过小基础值（如html { font-size: 10px; }），导致1.6rem实际为16px但受缩放影响波动 - 直接对
input、textarea、select设font-size: 16px或更大（推荐16px—— 刚好卡在临界点） - 注意继承：若父元素有
font-size: 14px，子input又没重置，就会掉进陷阱
示例修复：
input, textarea, select { font-size: 16px; }
iOS Safari 的隐藏限制：-webkit-text-size-adjust
即使字体达标，iOS Safari 仍可能对表单控件做内部字号调整。必须显式关闭：
-
-webkit-text-size-adjust: 100%是最稳妥写法（none在部分 iOS 版本失效） - 需加在
input等元素上，而非全局body—— 否则影响正文可读性 - 配合
font-size使用，单独设此属性不解决问题
完整组合拳：
input, textarea, select { font-size: 16px; -webkit-text-size-adjust: 100%; }
最易被忽略的是：viewport meta 必须在所有 CSS 加载前就存在，且不能被 JS 动态插入；另外，某些 UI 框架（如早期 Ant Design Mobile）会重置 input 样式，得检查 computed style 真实值是否真的 ≥16px。
