iOS微信内置浏览器中input等元素失焦放大问题，根源是系统强制缩放机制：当可编辑元素最终渲染字号＜16px时触发；解法为统一设置font-size≥16px并加:focus伪类、配合-webkit-text-size-adjust:100%及viewport minimum-scale=1.0、maximum-scale=1.0。
这个问题在 iOS 微信内置浏览器（基于 WKWebView，但行为贴近 Safari）中很典型：用户点击 input 或 textarea 时，页面突然放大，失焦后不自动恢复，影响布局和体验。根本原因不是微信特有，而是 iOS 系统级的可访问性机制——只要可编辑元素的**最终渲染字号小于 16px**，就会强制触发视口缩放。
核心解法：确保所有可聚焦元素 font-size ≥ 16px
iOS 的判断是硬编码的，只看 computed font-size 是否 ≥ 16px（15.99px 就会触发）。不能只写声明，必须保证实际生效：
- 覆盖全部可能唤起键盘的元素：
input、textarea、select、带contenteditable属性的容器（如富文本编辑器根节点） - 必须加
:focus伪类，防止某些框架或内联样式在聚焦时动态覆盖字号 - 推荐统一强设，避免被第三方 UI 库（如 Vant、NutUI）重置：
input, textarea, select, [contenteditable] { font-size: 16px !important; }
input:focus, textarea:focus, select:focus, [contenteditable]:focus { font-size: 16px !important; } - 若用 rem/em，请确认根字体（
html { font-size: 16px; }）或计算链最终不跌破 16px；避免clamp(14px, 4vw, 18px)在小屏下掉入临界值
配合 -webkit-text-size-adjust: 100%
这个属性不是禁用缩放，而是阻止 Safari 对文本做二次字号重算。它只在 font-size ≥ 16px 时才起效，且必须和字号同级设置：
- 不要写在
body或全局上，否则正文小字也会变模糊 - 正确写法：
input, textarea, select, [contenteditable] {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
} - 别用
none—— iOS 10+ 已废弃，部分版本反而失效
viewport meta 标签要写对
user-scalable=no 单独写无效，iOS 忽略它。真正起作用的是缩放范围锁定：
- 必须同时设置
minimum-scale=1.0和maximum-scale=1.0 - 推荐写法：
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> -
initial-scale=1和shrink-to-fit=yes是冗余或已废弃项，可省略
微信环境特别注意点
微信内置浏览器对 viewport 和 CSS 的解析更严格，常见坑：
- 某些老版本微信（如 8.0.22 以下）会忽略
maximum-scale=1.0，此时必须靠 font-size ≥ 16px 主力兜底 - 微信常注入自己的 JS 注入逻辑，可能动态修改 input 样式，所以
!important很关键 - 如果用了 Vue/React 封装的输入组件（如
<van-field>），需用:deep()或全局样式穿透确保生效
