viewport（视口）是浏览器用来显示网页的区域，视口尺寸就是这块区域的宽度和高度，单位是 CSS 像素。它通常比设备的屏幕分辨率小得多：一部屏幕为 1206 × 2622 像素的 iPhone，视口是 402 × 874 CSS 像素，因为每个 CSS 像素在横竖方向上各用 3 个物理像素来绘制。响应式 CSS、媒体查询和大多数布局决策依据的都是视口尺寸，而不是屏幕分辨率。
视口尺寸与屏幕分辨率的区别
描述手机屏幕的有三个数字，很容易混淆：
| 术语 | 示例（iPhone 17） | 含义 |
|---|---|---|
| 屏幕分辨率 | 1206 × 2622 px | 屏幕面板上的物理像素 |
| 设备像素比（DPR） | 3 | 每个 CSS 像素在每个方向上对应的物理像素数 |
| 视口尺寸 | 402 × 874 CSS px | 分辨率除以 DPR，也就是 CSS 看到的尺寸 |
在桌面端，DPR 通常是 1（一台 1920 × 1080 的显示器在 100% 缩放下，视口宽度为 1920 px，再减去滚动条），高密度屏幕的笔记本上则是 2。浏览器缩放也会改变 DPR：放大到 200% 时，以 CSS 像素计的视口宽度会减半。
各机型的具体数值见 iPhone 屏幕尺寸与视口对照表。
如何查看视口尺寸
在浏览器控制台中查看
打开 DevTools（F12 或 Cmd + Option + I），进入 Console 面板，运行：
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth 包含垂直滚动条。document.documentElement.clientWidth 不包含滚动条，更接近 CSS 百分比和 100% 宽度实际使用的值。
在 DevTools 设备模式中查看
设备工具栏会在页面上方显示模拟视口的尺寸。在 Responsive 模式下，可以拖动边缘或直接输入任意尺寸。参见 Chrome 手机模拟器使用指南。
在手机上查看
打开任意一个“what is my viewport”之类的网站，或者加载一个带小脚本、能显示 innerWidth 和 devicePixelRatio 的页面。注意结果会随屏幕方向和浏览器工具栏而变化。
布局视口与视觉视口
移动浏览器其实有两个视口：
- 布局视口是 CSS 排版页面所用的区域。只要 viewport meta 标签设置正确，它的宽度就等于以 CSS 像素计的设备宽度。
- 视觉视口是当前屏幕上可见的部分。用户双指放大或屏幕键盘弹出时，它会变小。
position: fixed 的元素是相对布局视口定位的，所以固定底栏可能被键盘挡住。在 JavaScript 中可以通过 window.visualViewport.width 和 .height 读取视觉视口，并监听它的 resize 事件。
为什么手机上的视口高度总在变化
在手机上，地址栏和工具栏会随滚动收起，可见高度因此不断变化。传统的 100vh 取的是可能的最大高度，所以过去全屏区块的底部经常被截掉。现在 CSS 为每种情况都提供了单位：
| 单位 | 含义 |
|---|---|
svh |
小视口高度：浏览器工具栏完全显示时 |
lvh |
大视口高度：工具栏完全隐藏时 |
dvh |
动态视口高度：随工具栏移动而变化 |
vh |
在现代移动浏览器中等同于 lvh |
如果首屏区块需要在页面加载时刚好占满屏幕，min-height: 100svh 通常最稳妥。宽度方向也有对应的 svw、lvw 和 dvw。
常见视口尺寸
| 设备类型 | 常见视口宽度（竖屏） |
|---|---|
| 小屏手机 | 320–375 px |
| 近年的 iPhone | 375–440 px |
| 安卓手机 | 360–412 px |
| 平板 | 744–1032 px |
| 笔记本电脑 | 1280–1536 px |
| 桌面显示器 | 1440–2560 px |
正因为范围这么大，响应式布局才要在断点之间保持流式伸缩，而不是针对某个精确尺寸。
如何测试不同的视口尺寸
在桌面端调整窗口大小会改变视口宽度，但桌面浏览器一般只能缩到 500 px 左右，DPR 也仍是 1 或 2。要看到尺寸和像素比都正确的手机视口，可以使用 DevTools 设备模式，或 Mobile View Extension 这类手机视图扩展。它会应用设备的屏幕尺寸、像素比和 User-Agent，也支持输入自定义分辨率。完整流程见如何测试响应式设计。
常见问题
怎样知道我的视口尺寸？
在浏览器控制台运行 window.innerWidth 和 window.innerHeight。在手机上，打开一个显示这些数值的页面即可；结果会随屏幕方向变化。
视口尺寸和屏幕分辨率是一回事吗？
不是。视口尺寸以 CSS 像素计，屏幕分辨率以物理像素计。用分辨率除以设备像素比，就得到视口尺寸。
设计时应该以哪个视口尺寸为准？
做从 320 px 起就能正常显示的流式布局。然后检查常见的手机宽度 360、390–402 和 430–440 px，平板约 768–834 px，桌面约 1280–1440 px。