是响应式设计的前提，因其设定布局视口基准，使媒体查询、vw单位等依赖真实设备宽度的机制生效；错误写法或缺失 initial-scale=1 会导致断点失效、缩放异常。
为什么 <meta name="viewport"> 是响应式设计的前提
没有它，CSS 媒体查询（@media）在移动端基本失效。浏览器会按桌面默认宽度（通常是 980px 左右）渲染页面，然后缩放缩小显示——这时你写的 max-width: 768px 可能根本不会触发，因为视口逻辑宽度远大于设备物理宽度。
width=device-width 不只是“设成设备宽”，它重置了布局视口基准
移动端浏览器有两个关键宽度概念：视觉视口（用户看到的缩放后区域）和布局视口（CSS 盒模型计算所用的“虚拟画布”）。默认情况下，布局视口是固定的大值（如 980px），与设备无关。width=device-width 的作用是让布局视口宽度 = 设备物理像素宽度 ÷ 初始缩放比例（通常为 1），从而让 CSS 中的 100vw、媒体查询断点真正对应设备能力。
常见错误写法：
<meta name="viewport" content="width=375"> <!-- 错！硬编码像素值，不随设备变化 --> <meta name="viewport" content="width=100%"> <!-- 错！HTML 中 width 不支持百分比 -->
initial-scale=1 必须配合 width=device-width 使用
只写 width=device-width 而不写 initial-scale=1，某些 Android 浏览器仍可能以非 1 倍缩放初始化，导致布局视口计算偏移。两者是绑定生效的组合：
立即学习“前端免费学习笔记（深入）”；
-
width=device-width告诉浏览器：“用设备真实逻辑宽度当布局基准” -
initial-scale=1告诉浏览器：“别缩放，1:1 显示”
遗漏任一，都可能导致文字过小、点击区域错位、媒体查询不匹配。
其他参数如 user-scalable=no 要谨慎启用
禁用用户缩放看似能“统一体验”，但实际违反可访问性原则（WCAG），且 iOS Safari 在某些版本中会忽略该设置。更严重的是：当页面存在表单输入框时，iOS 会强制放大聚焦区域——如果禁用了缩放，会导致输入框被截断或键盘遮挡内容。
推荐最小安全配置：
<meta name="viewport" content="width=device-width, initial-scale=1">
如需兼容旧版 IE 或特殊场景（如 WebApp 全屏），才考虑追加 maximum-scale=1 或 shrink-to-fit=yes（仅 Safari 旧版），但不要默认加。
视口不是“加了就完事”的装饰标签，它是整个响应式流的起点——断点、rem/vw 计算、触摸事件判定，全都依赖它提供的可信宽度基准。漏掉或写错，后面所有 CSS 适配都在空中建楼。
