移动端数字键盘弹起触发页面缩放是浏览器UA自动调整initial-scale所致，并非CSS错误；需用<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">配合font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%禁用文本放大，微信安卓版还需内联!important样式。
为什么移动端数字键盘弹起会触发页面缩放
这不是 CSS 写错了，而是浏览器在唤起 <input type="number"> 或 <input inputmode="numeric"> 时，部分 Android 厂商 WebView（如华为、小米）和旧版 iOS Safari 会自动放大页面以“适配输入框内容”，本质是 UA 强制触发的 initial-scale 调整。它绕过所有 CSS 控制，只响应 <meta name="viewport"> 的初始声明。
必须删掉 viewport 里的 maximum-scale=1.0 吗
不是必须删，而是不能只靠它防缩放。实测发现：当用户聚焦数字输入框，某些 Android 浏览器会无视 maximum-scale=1.0，直接将 initial-scale 拉高到 1.3+；iOS 则更隐蔽——它不改 scale 值，但通过“文字放大”模拟缩放，导致布局错位、按钮变小、点击热区偏移。
-
user-scalable=no是必要项，但仅对双指手势有效，对输入框自动放大无效 -
minimum-scale=1.0必须去掉，否则横屏时页面被裁切，且会加剧数字键盘下的缩放冲突 - 真正有效的写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">—— 不加maximum-scale，反而更稳
CSS 层面能做的唯一有效干预：禁用文本自动放大
Android 和 iOS 都会在数字输入框聚焦时，偷偷放大字体来提升可读性，进而拖拽整个布局。这个行为可通过 CSS 关闭：
input[type="number"],
input[inputmode="numeric"],
input[type="tel"] {
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
-
font-size必须显式设为固定值（如16px），不能是rem或em，否则 UA 可能二次缩放 -
-webkit-text-size-adjust: 100%在 iOS 12+ 和大多数 Android Chrome 中生效；text-size-adjust: 100%是标准属性，但部分旧 WebView 仅认前者 - 别用
touch-action: manipulation替代——它只优化点击延迟，不阻止文本放大
为什么 focus/blur + JS 动态重设 viewport 不推荐
有人尝试在 focusin 时动态改 <meta name="viewport"> 的 content，再在 blur 时还原。这在 iOS 上基本无效（meta 一旦解析完成即锁定），在 Android 上则可能触发两次 layout，造成明显闪动。
真正要盯住的是两个信号：
- 数字键盘弹起 ≠ 页面缩放，但缩放常伴随它发生；优先检查是否误用了
font-size: clamp(...)或vw单位，它们在缩放后会二次计算，放大失真 - 如果仍出现缩放，90% 情况是输入框父容器有
transform或scale，导致浏览器将其判定为“需要放大适配”的区域——把transform移到更高层或取消即可
最易被忽略的一点：微信内置浏览器（安卓版）对 text-size-adjust 支持极差，必须额外加 style="font-size: 16px !important;" 到输入框上，否则照样放大。
