iOS Safari聚焦时强制缩放是因可聚焦元素最终渲染font-size＜16px触发的可访问性策略，必须确保input、textarea、select及[contenteditable]元素computed font-size≥16px，并配合正确viewport设置。
为什么 input 聚焦时页面会放大
iOS Safari 在 input、textarea、select 或带 contenteditable 的元素获得焦点时，会检测其**最终渲染的 font-size**。若小于 16px，就触发强制缩放——这不是 bug，是系统级可访问性策略。哪怕你写了 user-scalable=no，它照样绕过限制放大视口。
必须确保所有可聚焦元素 font-size ≥ 16px
这是最核心、最稳定的防线。不能只靠声明值，要看「Computed」面板里真实渲染出来的像素值：
-
font-size: 16px是硬门槛，15.9px就会放大 - 用
rem或em时，要确认根字体或上下文最终算出来 ≥ 16px（比如html { font-size: 16px; }+input { font-size: 1rem; }） - 框架组件（如
<van-field></van-field>、<el-input></el-input>）可能动态注入内联样式，覆盖你的规则，所以加!important很常见 - 别漏掉
select和[contenteditable]，它们同样触发放大
推荐兜底写法：
input, textarea, select, [contenteditable] {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
viewport meta 设置只是辅助，不能替代 font-size
maximum-scale=1 只约束用户主动缩放，不拦截系统自动聚焦放大；user-scalable=no 在 iOS 10+ 已降级为提示，且 iOS 15.4+ 更宽松。单独设它基本无效。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
width=device-width，否则整个 viewport 解析异常，scale 设置全失效 - 不要加
minimum-scale=1.0，横屏时会裁切内容 - 避免写
shrink-to-fit=yes，已废弃，现代 iOS 不识别
基础 meta 应该是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
JS 动态控制 viewport 是最后手段，慎用
纯 CSS + 正确 font-size 覆盖 95% 场景。只有当某些 UI 库深度劫持样式、或运行时动态插入不可控 input 时，才考虑 JS 补救：
- 监听
focusin/focusout，不是focus/blur，前者冒泡更可靠 - 聚焦时临时设
maximum-scale=1.0，但必须同时移除user-scalable=no，否则可能锁死后续双指缩放 - 失焦后要用
setTimeout延迟恢复原始 content，否则 iOS 可能来不及重绘 - 务必在
DOMContentLoaded后执行，否则<meta name="viewport">还没被解析
示例逻辑：
const vp = document.querySelector('meta[name="viewport"]');
const originalContent = vp?.getAttribute('content') || '';
document.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea, select, [contenteditable]')) {
vp?.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
}
});
document.addEventListener('focusout', () => {
setTimeout(() => vp?.setAttribute('content', originalContent), 300);
});
真正容易被忽略的是：iOS 在键盘弹出时会重算 vh，导致布局抖动；而 font-size 若依赖 clamp() 或响应式单位，在小屏下可能意外跌破 16px —— 最终生效的永远是开发者工具里「Computed」标签页显示的那个数字，不是你写的 CSS 源码。
