viewport必须写在中且紧贴后，仅width=device-width或initial-scale=1单独使用均无效，二者缺一不可；禁止滥用user-scalable=no等锁死缩放的组合，以免违反可访问性标准。
没加 <meta name="viewport">，移动端页面基本就是“半残”状态——文字小得看不见、布局横向溢出、媒体查询不触发，不是 bug 是设计缺陷。
viewport 必须写在
浏览器是顺序解析 HTML 的，viewport 标签必须出现在 开头附近，最好紧贴 <title></title> 后面。如果它被 JS 动态插入、放在 里、或被 SSR 框架的注释/占位符挤到后面，iOS Safari 和部分 Android WebView 会直接忽略，按默认 980px 宽度渲染。
- 错误位置：
<meta name="viewport" content="..."> - 危险操作：用 JS 找到
meta[name="viewport"]再改content值 - 框架注意点：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，某些安卓浏览器仍可能默认缩放到 0.8x
别碰 user-scalable=no、maximum-scale=1 这类组合
这三者连用：user-scalable=no, maximum-scale=1, minimum-scale=1，等于锁死所有缩放能力。iOS 13+ 会降权该页面，甚至弹提示“该网站可能无法正常工作”；更关键的是，它直接违反 WCAG 2.1 可访问性标准——视力障碍用户开系统「更大字体」或「辅助缩放」后，文字会被截断、按钮点不到。
- 真实例外场景极少：纯展示型 kiosk 屏、嵌入式 WebView（且 native 层已统一接管手势）
- 业务页面请用
user-scalable=yes（可省略，默认即 yes） - 加了
maximum-scale=1，iOS 系统级「显示与文字大小」设置就失效 - 测试时务必打开 iOS 「辅助功能 → 显示与文字大小 → 更大字体」验证是否还能正常放大
viewport 不解决图片模糊，srcset 才管用
viewport 只决定 CSS 像素和物理像素的映射关系，不会让一张 20×20 的 icon.png 在 2x 屏上变清晰。它被拉伸成 40×40 物理像素后，必然模糊。
- 正确做法是用
srcset提供多倍图：<img src="icon.png" srcset="icon@2x.png 2x, icon@3x.png 3x"> - 配合 CSS：
img { max-width: 100%; height: auto; }，防溢出 - 字体别全用
px，优先用rem或em，否则initial-scale=1下小屏字体会过小 - 容器别写死宽度，比如
.header { width: 375px; }，应改用width: 100vw或媒体查询 + flex
最常被忽略的其实是「多层嵌套」场景：iframe 里的页面，父页的 viewport 对它完全无效，子页必须自己配。还有 Web App 添加到主屏后，iOS 会强制重置为 initial-scale=1，这个行为无法绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
