视口尺寸与响应式断点测试工具

视口是网页必须绘制的区域——您的浏览器窗口去掉标签页、地址栏和滚动条后剩下的部分。这就是为什么它几乎总是比屏幕分辨率小：屏幕是整个面板，而视口只是页面可以使用的那一部分。它以 CSS 像素（布局单位，而非物理点）来衡量——高密度“Retina”显示屏会在每个 CSS 像素中塞入两到三个物理像素，使文字看起来更清晰，而 window.devicePixelRatio 会报告这一倍数。

这个工具会在每次调整大小和方向变化时读取 window.innerWidth 和 window.innerHeight，同时读取来自 documentElement.clientWidth/clientHeight 的布局视口、您的设备像素比和方向。断点是指布局发生变化的视口宽度——列叠加、菜单折叠、文字大小调整——而像 Tailwind CSS 这样的框架会从一组命名宽度开始向上应用样式。下面的参考表格会高亮显示您的宽度所在的区间，可拖曳的测试面板也会报告其自身宽度会命中的断点，这样您就可以预览组件，而无需调整整个窗口的大小。一切均在本地运行，不会上传任何内容。

如果数字看起来不太对，说明您面板的分辨率和页面所看到的视口之间还隔着几个因素。浏览器的界面元素（工具栏、地址栏等）和滚动条会占用可用区域，页面缩放会缩小 CSS 像素的数量——因此 innerWidth 会在窗口本身未移动的情况下下降——操作系统的显示缩放也是如此，这就是为什么两台相同的显示器可能会报告不同的尺寸。在手机上，meta 视口标签 <meta name="viewport" content="width=device-width, initial-scale=1"> 会让页面按设备宽度布局，而不是伪造一个约 980px 宽的桌面视口，因此 DPR 为 3 时，390 像素的视口对应的面板物理宽度约为 1170 像素。要查看屏幕的完整物理分辨率和像素密度，请使用 What Is My Screen Size 和 Screen Resolution Test 工具。

常见的响应式断点