ios safari 输入框聚焦自动放大是内置可访问性逻辑，非bug；需确保input/textarea等元素computed font-size≥16px、box-sizing为border-box，并配合viewport中maximum-scale=1.0且user-scalable=no方可规避。
iOS Safari 在 input 或 textarea 聚焦时自动放大页面，不是 bug，是它内置的辅助逻辑：当字体小于 16px 或内容区过窄，就强制缩放整个视口来“提升可读性”。单纯靠 CSS 无法拦截这个行为，但可以精准规避触发条件。
为什么 font-size ≥ 16px 是硬性门槛
iOS 的缩放触发机制基于渲染后实际字号——不是你写的 font-size 值，而是最终计算值。如果父元素设置了 font-size: 14px，而 input 没显式声明字体大小，它会继承 14px，触发放大。
- 必须给
input、textarea显式设置font-size: 16px或更大（推荐用16px，兼容性最稳） - 避免用
em或rem设置字体大小，除非你能 100% 控制根字号或继承链 - 不要依赖
-webkit-text-size-adjust: none：iOS 10+ 已废弃，且可能破坏屏幕阅读器支持
为什么 width: 100% + box-sizing: border-box 还不够
即使写了 width: 100%，若父容器有 padding 或 border，而 box-sizing 被重置为 content-box（比如 Bootstrap 或 Normalize.css 默认行为），实际内容宽度就会小于 100%，Safari 判定“太窄”，照样放大。
- 在
input选择器上加box-sizing: border-box !important（仅限必要场景） - 更推荐统一重置：
input, select, textarea, button { box-sizing: border-box; } - 检查开发者工具里“Computed”面板中的
box-sizing值，别只看源码 - 避免用
max-width: 100%替代width: 100%——它不拉伸，只限制上限
为什么 viewport meta 标签必须同时设 maximum-scale=1.0 和 user-scalable=no
只写 user-scalable=no 不起作用。iOS Safari 会忽略它，除非 maximum-scale 显式设为 1.0。这是唯一能关闭自动缩放的入口，CSS 只能配合，不能替代。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
user-scalable必须是no（不是false、空字符串或0） - 不要混入
minimum-scale或其他 scale 参数，增加不可控变量 - 该标签必须在
中，且不能被 JS 动态插入（部分 iOS 版本不识别）
真正容易被忽略的是：所有这些 CSS 修复都建立在 meta 标签生效的前提下。如果 meta 写错或缺失，再调 font-size 和 box-sizing 都只是白忙——Safari 根本不给你“不放大”的机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
