是移动端渲染的开关，必须置于最开头，标准配置为content="width=device-width, initial-scale=1"；禁用user-scalable=no以保障可访问性，配套需避免硬编码宽高、图片未设max-width:100%及媒体查询断点失配。
没加 <meta name="viewport">，所有 CSS 媒体查询、rem 计算、图片自适应都会失效——它不是“锦上添花”，而是移动端渲染的开关。
viewport 必须写在哪、怎么写才生效
必须放在 最开头，不能动态插入、不能写在 里，也不能被 SSR 框架的注释或占位符挤到后面。浏览器一解析到它就立刻应用，晚了可能已按默认 980px 渲染完首屏，再改会触发缩放抖动甚至重排。
-
width=device-width是核心：不写它，iOS Safari 和安卓 WebView 都会 fallback 到桌面视口宽度，文字小得看不清 -
initial-scale=1必须显式带上：只写width=device-width时，某些老版本 iOS 仍可能忽略缩放逻辑 - 别写
width=375或width=1024这类固定值——设备一换就横向滚动或留白 - 标准最低可用配置就是：
<meta name="viewport" content="width=device-width, initial-scale=1">
为什么 maximum-scale 和 user-scalable=no 是危险操作
加了 maximum-scale=1 或 user-scalable=no 看似“稳”，实则直接破坏可访问性：视力障碍用户无法放大阅读，系统级「更大字体」设置被绕过，iOS 13+ 中部分版本还会导致双击放大手势失效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- WCAG 2.1 明确要求保留用户缩放控制权
- iOS Safari 对
maximum-scale的处理有历史 bug，曾造成折叠屏下媒体查询错判 - Web App 添加到主屏后，iOS 会强制忽略
maximum-scale，但user-scalable=no仍会锁死手势，徒增不可控 - 真需要限制缩放范围？用
minimum-scale=0.5, maximum-scale=2.0，但务必配合测试
viewport 写对了，但页面还是错乱？检查这三个配套点
<meta name="viewport"> 只管“画布怎么铺开”，不解决布局、字体、图片的具体适配。常见翻车现场都出在这里：
- CSS 里写了
width: 375px或font-size: 16px这种硬编码——该用%、rem、vw的地方没换 - 图片没加
max-width: 100%; height: auto;，直接撑爆容器引发横向滚动 - 媒体查询用了
@media (max-width: 767px)却忘了在大屏样式里重置display或flex-direction，导致小屏规则残留覆盖 - 断点数值照搬别人家的 768/1024，实际内容在 640px 就已挤不开，却还在等 768px 才响应
真机调试时 viewport 行为不一致？优先排查这些
Chrome DevTools 的设备模拟器只模拟视口尺寸，不模拟真实 DPR、系统缩放或 iOS Safari 的 layout width 推导逻辑。iPadOS 开启“请求桌面站点”后，device-width 返回的是 CSS 像素宽（比如 1024px），而非物理宽度，会导致媒体查询误判。
- 别依赖
document.documentElement.clientWidth判断视口宽——它返回的是 layout width，可能和screen.width或媒体查询结果不一致 - iFrame 里的页面不受父页
viewport影响，子页面必须自己声明 - 某些安卓 WebView 在
initial-scale缺失时会忽略width=device-width，务必写全 - 高 DPR 设备（如 iPhone 14 Pro）下，
width=device-width给你的是 390px CSS 像素，不是 1170 物理像素——viewport 不解决 DPR 导致的模糊问题，那是srcset和@media (-webkit-min-device-pixel-ratio: 2)的事
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
