先记住这个答案
视口声明决定移动浏览器怎样建立布局视口，CSS 视口单位和媒体查询才在这个基础上计算。没有合适的 <meta name="viewport"> 时，浏览器可能先按较宽的虚拟页面排版再整体缩小，于是手机上看着小，断点也不像预期那样命中。设置 width=device-width 只是建立正确坐标系，内容是否响应仍取决于具体 CSS。
- viewport meta 建立移动布局视口
vw再按视口计算长度- meta 不会自动生成响应式布局
- 不要随意禁止用户缩放
手机页面被缩小的排查入口
手机上打开一篇文章，页面看起来像被缩小的桌面网页，@media (max-width: 600px) 也没有按预想触发。先检查文档头部有没有 viewport meta；浏览器可能正用宽布局视口排版。加上常见声明后，布局视口宽度与设备 CSS 像素宽度更一致，断点和 vw 的表现才容易理解。随后仍要用响应式 CSS 处理内容，meta 不会自动让两列变一列。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.hero { width: 100vw; } /* 基于当前视口计算 */
</style>viewport meta 影响移动浏览器如何建立布局视口和初始缩放；CSS 的视口单位引用视口尺寸。
示例中的 .hero { width: 100vw; } 只是说明单位基于视口，并不是所有横幅都应这么写。100vw 在有竖向滚动条的桌面环境里可能比内容区略宽，导致意外横向滚动；普通块级元素用 width: 100% 常更合适。若横幅需要突破居中容器，才应明确计算与视口的关系，同时检查滚动条和安全区。
视口声明与 CSS 单位不是一回事
没有正确的视口设置时，同一条 max-width 查询面对的可能不是你以为的手机布局宽度。width=device-width 表示按设备 CSS 像素宽建立布局视口，initial-scale=1 设置初始缩放。不要为“防止页面乱掉”随意禁用用户缩放，放大能力对可访问性很重要。
若手机页面看起来像被缩小的桌面网页，可先在 DevTools 查看布局视口宽度，再查页面是否有正确的 viewport meta。补上声明后，原来以为“手机不命中”的媒体查询可能开始命中，页面甚至暴露未做窄屏布局的问题。这说明视口声明只是让浏览器按设备宽度计算，不能代替重新安排导航、图片和表单。
容易答错的地方
- 以为 viewport meta 自动生成响应式布局
- 它只建立合适的视口基础，列数、换行和尺寸还要靠 CSS。
- 为了适配手机禁止缩放
- 禁止缩放会损害需要放大文字的用户，问题应通过布局与字号设计解决。
面试官还会怎么问？
100vw 为什么有时造成横向滚动？
视口单位与垂直滚动条的计量、盒模型和额外边距等因素可能让元素超出可用内容宽度；普通块宽常用 width: 100%。
initial-scale=1 是字体大小吗？
不是，它是页面初始缩放比例。
CSS 断点失效一定是缺少 meta 吗？
不一定，还要检查媒体条件、级联覆盖和实际视口；但移动端应先确认视口声明。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。