ios safari 输入框聚焦时页面缩放需用meta标签禁用：user-scalable=no且maximum-scale=1.0；css仅能减少触发条件，如确保font-size≥16px、避免窄容器。
iOS Safari 输入框聚焦时页面缩放怎么办
直接禁用用户缩放就行，但得用对方法——meta 标签的 user-scalable=no 是唯一可靠入口，CSS 本身拦不住这个行为。
为什么 viewport 的 user-scalable=no 必须写对
iOS Safari 在输入框获得焦点时，如果字体小于 16px 或容器太窄，会强制放大整个视口来“方便阅读”，这不是 bug，是它的默认辅助逻辑。关掉它只能靠 meta 标签，而且必须满足两个条件：
-
user-scalable值必须是no（不能是false或空字符串） -
maximum-scale必须显式设为1.0（仅user-scalable=no不够，Safari 会忽略）
正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
CSS 能做的只是配合，不是替代
CSS 无法阻止 iOS 的自动缩放，但能减少触发条件。重点不是“禁止缩放”，而是“不让 Safari 觉得需要缩放”：
- 确保
input、textarea的font-size≥16px（iOS 的临界值） - 避免给表单控件设
width: 100%同时父容器有padding或border，这会让计算后内容区变窄，触发放大 - 慎用
-webkit-text-size-adjust: none：它在 iOS 10+ 已被废弃，且可能影响可访问性
真遇到缩放了，怎么快速定位是不是 meta 没生效
打开 Safari 开发者工具（需 macOS + 真机调试），检查 里的 viewport meta 是否被覆盖或重复声明：
- 多个
meta name="viewport"标签时，只有第一个生效 - 某些 UI 框架（如 Ionic、Cordova 插件）会动态重写
viewport，覆盖你写的 - 如果页面加载后执行了 JS 修改
document.querySelector('meta[name=viewport]').content，那你的初始设置就白写了
最稳的做法：把 meta 标签放在 最顶部，且不依赖 JS 注入。
缩放问题本质是 Safari 对小字号+窄容器的容错机制，不是样式没写对。改 CSS 只是治标，viewport 配置写错一行，其他全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
