真正可用的移动端响应式布局必须以 viewport 为第一环：width=device-width 和 initial-scale=1 缺一不可，确保浏览器按设备逻辑宽度渲染且不自动缩放；user-scalable=yes 是默认且必需的可访问性保障，禁用缩放违反 WCAG 标准；maximum-scale/minimum-scale 应避免使用，其限制不可靠且损害无障碍体验；viewport 仅决定渲染画布，还需配合媒体查询、弹性布局、相对单位及 max-width: 100% 等 CSS 措施才能完整适配。
要实现真正可用的移动端响应式布局，Viewport 配置不是“加上就行”的装饰项，而是整个响应式链条的第一环。它不负责样式细节，但决定了浏览器用多宽来渲染页面、文字是否自动放大、媒体查询能否触发——配错，后面所有 CSS 都白搭。
基础写法必须包含两个核心参数
最简、最稳、最推荐的写法只有一行，且必须写在 最前面：
- width=device-width：让布局视口宽度匹配设备的逻辑像素宽度（比如 iPhone 14 是 390px，Pixel 7 是 412px），而不是固定写死 375 或 320；
- initial-scale=1：确保页面加载时以 1:1 比例渲染，避免 iOS Safari 对小字号内容自动放大导致布局跳动。
这两项缺一不可。只写 width=device-width，某些安卓浏览器可能忽略缩放逻辑；只写 initial-scale=1，iOS 可能仍按 980px 宽度渲染再缩小，文字模糊、点击错位。
user-scalable=yes 是默认且推荐的选择
显式写上 user-scalable=yes 不是可有可无，而是保障可访问性的基本要求：
- 视力障碍用户、老年用户依赖双指缩放阅读正文或操作按钮；
- iOS 13+ 和多数现代安卓浏览器已弱化甚至忽略 user-scalable=no，强行禁用反而让系统级辅助功能（如「更大字体」）失效；
- 除非是自助终端、车载仪表盘等封闭场景，否则不要加 user-scalable=no。
坚决不用 maximum-scale 和 minimum-scale
这两个参数看似“可控”，实则风险集中：
- maximum-scale=1 会直接屏蔽用户主动放大行为，也阻止系统辅助缩放生效，导致文字被截断、按钮点不到；
- iOS 10+ 起已部分忽略这些限制，不同机型表现不一致，调试成本高；
- WCAG 2.1 明确要求内容支持 200% 缩放，禁用缩放即不合规。
真有强约束需求（如 Kiosk 模式），必须配套提供界面内字号调节、高对比模式等替代方案，不能只靠 meta 锁死。
Viewport 只是起点，必须配合 CSS 才算完整
写了正确的 viewport，不代表页面就“适配好了”。常见失效原因往往出在 CSS 层：
- 字体别用固定 px，优先用 rem/em，并通过 JS 或 CSS 自定义属性动态设置根字体大小；
- 所有图片、视频、表格加全局样式：img, video, table { max-width: 100%; height: auto; }；
- 容器宽度避免写死 px（如 width: 375px），改用 width: 100%、max-width: 100vw 或媒体查询分段控制；
- 点击区域至少留够 44×44px，小图标用 transform 缩放而非 1px 边框，避免高 DPR 下发虚。
viewport 告诉浏览器“按什么宽度画布来画”，而媒体查询、Flexbox、Grid、相对单位才决定“在这块画布上怎么排布”。两者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
