是响应式设计的前提，因其设定布局视口基准，使媒体查询、vw单位等依赖真实设备宽度的机制生效；错误写法或缺失 initial-scale=1 会导致断点失效、缩放异常。
为什么
没有它，CSS 媒体查询（@media）在移动端基本失效。浏览器会按桌面默认宽度（通常是 980px 左右）渲染页面，然后缩放缩小显示——这时你写的 max-width: 768px 可能根本不会触发，因为视口逻辑宽度远大于设备物理宽度。
width=device-width 不只是“设成设备宽”，它重置了布局视口基准
移动端浏览器有两个关键宽度概念：视觉视口（用户看到的缩放后区域）和布局视口（CSS 盒模型计算所用的“虚拟画布”）。默认情况下，布局视口是固定的大值（如 980px），与设备无关。width=device-width 的作用是让布局视口宽度 = 设备物理像素宽度 ÷ 初始缩放比例（通常为 1），从而让 CSS 中的 100vw、媒体查询断点真正对应设备能力。
常见错误写法：
initial-scale=1 必须配合 width=device-width 使用
只写 width=device-width 而不写 initial-scale=1，某些 Android 浏览器仍可能以非 1 倍缩放初始化，导致布局视口计算偏移。两者是绑定生效的组合：
立即学习“前端免费学习笔记（深入）”；
-
width=device-width告诉浏览器：“用设备真实逻辑宽度当布局基准” -
initial-scale=1告诉浏览器：“别缩放，1:1 显示”
遗漏任一，都可能导致文字过小、点击区域错位、媒体查询不匹配。
