Viewport
手机屏幕宽度通常只有 375~414px，而网页大多按更宽的桌面尺寸设计。若不加处理，手机浏览器会把整页缩小塞进屏幕，文字小到几乎没法读。Viewport（视口）正是解决“页面按多宽渲染、以什么比例缩放”的关键概念，是响应式设计的第一步。
什么是视口
视口是浏览器显示网页的可视区域。手机浏览器里存在两个视口：
- 布局视口：页面实际排版使用的画布，默认宽约 980px，接近桌面宽度。
- 视觉视口：用户屏幕上真正看到的那一小块区域。
两者宽度不一致时，页面被等比缩小，于是出现“文字如蚂蚁”的效果。通过 meta 标签可以让布局视口等于设备宽度，问题随之解决。
viewport meta 标签
在 <head> 中加入下面这一行，是所有响应式页面的标配：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
取值说明：
| 属性 | 作用 | 常用值 |
|---|---|---|
| width | 设置布局视口宽度 | device-width（等于设备宽） |
| initial-scale | 页面初始缩放比例 | 1.0（不缩放） |
| maximum-scale | 允许放大的上限 | 一般省略，保留用户缩放权 |
| user-scalable | 是否允许用户缩放 | 不要设为 no，影响可访问性 |
加上前后的差别
假设页面有一个 960px 宽的容器：
.box { width: 960px; margin: 0 auto; }
不加 meta 时，手机按约 980px 的布局视口排版，再整体缩小呈现，文字细小、需要双击放大；加上 meta 后布局视口贴近真实屏幕宽度，配合百分比宽度与媒体查询，页面才能按手机宽度正常排版。用浏览器开发者工具的设备模拟模式即可直观对比这两种效果。
配合 CSS 一起用
meta 只是把“画布宽度”定对，真正的自适应排版要靠 CSS：百分比/弹性单位加媒体查询。手机优先的最小示例：
.box { width: 100%; } /* 任何屏幕都占满 */
@media (min-width: 768px) {
.box { width: 50%; } /* 平板及以上只占一半 */
}
效果：小屏全宽、宽屏半宽，内容随设备宽度自然伸缩。
小结
Viewport 是响应式设计的起点：在 head 里加上 width=device-width、initial-scale=1.0 的 meta，让布局视口贴合真实屏幕。没有它，后面的媒体查询、栅格与弹性图片都无从谈起。