不加viewport标签移动端页面基本“半残”：文字小、布局溢出、媒体查询失效；必须置于最前，且width=device-width与initial-scale=1缺一不可，禁用user-scalable=no等破坏可访问性的参数。
不加 ，移动端页面基本就是“半残”状态——文字小得看不见、布局横向溢出、媒体查询不触发。它不是锦上添花，而是移动端渲染的开关。
viewport 必须写在 最开头，且不能动态插入
浏览器是顺序解析 HTML 的， 一出现就立刻应用。如果它被 JS 动态插入、写在 里、或被 SSR 框架的注释/占位符挤到
- 错误位置：
- 危险操作：用
document.querySelector('meta[name="viewport"]').setAttribute('content', ...)在 JS 中改值 - 框架注意点：Next.js 要确认
next/head输出后源码里它确实在靠前位置；Vue CLI 用vue-meta时也需检查最终 HTML - 重复声明时，只认第一个，后面全丢弃
width=device-width 和 initial-scale=1 缺一不可
只写 width=device-width，iOS 可能设对宽度但无视缩放逻辑；只写 initial-scale=1，某些安卓 WebView 仍按桌面宽度（如 980px）布局再缩放，导致横向滚动。二者必须共存，才能让 CSS 像素与设备物理像素对齐，媒体查询断点才准。
- 别写死数值，比如
width=375或width=414——折叠屏、平板、新机型一来就错乱 -
device-width不是屏幕物理像素，而是经 DPR 换算后的 CSS viewport 宽度（例如 iPhone 14 Pro 是 430px） - 不加
initial-scale=1，即使写了width=device-width，某些老安卓 WebView 仍可能默认缩放到 0.8x
别碰 user-scalable=no、maximum-scale=1 这类组合
这三者连用：user-scalable=no, maximum-scale=1, minimum-scale=1，等于锁死所有缩放能力。iOS 13+ 会降权该页面，甚至弹提示“该网站可能无法正常工作”；更关键的是，它直接违反 WCAG 2.1 可访问性标准——视力障碍用户开系统「更大字体」或「辅助缩放」后，文字会被截断、按钮点不到。
- 业务页面请用
user-scalable=yes（可省略，默认即 yes） - 加了
maximum-scale=1，iOS 系统级「显示与文字大小」设置就失效 - 真需要限制缩放范围？可用
minimum-scale=0.5, maximum-scale=2.0，但务必搭配真机测试 - Web App 添加到主屏后，iOS 会强制忽略
maximum-scale，但user-scalable=no仍会锁死手势
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 才响应
真机调试时行为不一致？优先排查 Chrome DevTools 的设备模拟器只模拟视口尺寸，不模拟真实 DPR、系统缩放或 iOS Safari 的 layout width 计算逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
