应采用css与js组合策略：动态修改viewport的maximum-scale、确保输入框font-size≥16px或设置-webkit-text-size-adjust: 100%，并绑定focusin/focusout事件精准控制缩放。
移动端 Safari 输入框聚焦时页面缩放怎么办
直接加 maximum-scale=1 不解决问题，反而可能锁死双指缩放，而且 iOS 16+ 已部分忽略该属性——真正起效的是组合策略。
viewport meta 的 maximum-scale=1 为什么经常失效
iOS Safari 在 <input> 或 <textarea></textarea> 获得焦点时，会强制放大文字以提升可读性，此时即使设了 maximum-scale=1，浏览器仍可能临时绕过该限制。更关键的是：user-scalable=no 在 iOS 10+ 已被降级为提示，不具强制力；而仅靠 maximum-scale=1 无法阻止聚焦缩放。
-
maximum-scale=1只约束用户主动缩放行为，不拦截系统自动缩放逻辑 - 缺失
width=device-width会导致 viewport 解析异常，让 scale 设置整体失效 - iOS 15.4+ 对
user-scalable=no的处理更宽松，不能依赖它锁死缩放
CSS + JS 组合方案：禁用聚焦放大最稳的写法
纯 CSS 无法拦截聚焦事件，必须配合 JS 动态控制 viewport 的 content 属性，且要在聚焦瞬间生效。
- 给所有文本类输入框绑定
focus和blur事件 - 聚焦时临时将
maximum-scale改为1.0，并移除user-scalable（避免冲突） - 失焦后恢复原始 viewport 设置，否则影响后续正常缩放
- 务必在
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[type="text"], input[type="search"], textarea')) {
vp?.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
}
});
document.addEventListener('focusout', () => {
setTimeout(() => vp?.setAttribute('content', originalContent), 300);
});
font-size 小于 16px 是触发放大最隐蔽的原因
iOS Safari 默认对 font-size 的文本输入框强制放大，哪怕 viewport 设置完全正确。这不是 bug，是设计行为——它试图保证可访问性。
- 检查所有
input和textarea的最终计算字号（含继承、rem/em 换算） - 确保
font-size: 16px或更大，或用-webkit-text-size-adjust: 100%抑制调整 -
-webkit-text-size-adjust: none已废弃，必须用100%，且需配合text-size-adjust: 100%（兼容 Android） - 注意：若父元素设了
transform: scale()，也会干扰字体尺寸判断，导致误触发
真正麻烦的不是写几行代码，而是要同时满足 viewport 动态控制、字体尺寸合规、事件时机精准这三层条件——漏掉任意一层，用户点进输入框那一刻，页面还是照常放大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
