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

看看你的浏览器窗口对网页来说到底有多大。此工具会以 CSS 像素读取你的视口宽度和高度、设备像素比和屏幕方向,并显示当前尺寸落在哪个响应式断点区间——全部实时呈现。调整窗口大小,所有数值都会立即更新。

—×—px

调整浏览器窗口大小,实时查看这些数值的更新。

正在读取视口…断点: —

视口

—

window.innerWidth × innerHeight(CSS px)

布局视口

—

documentElement 客户区尺寸

设备像素比

—

CSS px → 物理 px

屏幕方向

—

宽大于高,或高大于宽

Tailwind CSS 断点

当你调整窗口大小时,你的视口所落入的区间会被高亮显示。

前缀	最小宽度	适用范围
base	0px	0 – 639px
sm	640px	640 – 767px
md	768px	768 – 1023px
lg	1024px	1024 – 1279px
xl	1280px	1280 – 1535px
2xl	1536px	1536px+

设备类别

手机

<640px

平板

640–1023px

笔记本电脑

1024–1439px

桌面

≥1440px

可调整大小的测试面板

拖动右下角以调整此面板的大小。它会报告自身的尺寸以及该宽度会命中哪个断点——一种快速的响应式测量方式。

面板尺寸—面板断点—

—

拖动我的右下角 ↘

常见设备视口尺寸

以竖屏 CSS 像素视口给出的近似参考值——实际数值会因浏览器和操作系统而异。

设备	视口(CSS px)	DPR
iPhone SE	375 × 667	2×
iPhone 15 / 14 Pro	393 × 852	3×
Pixel 8	412 × 915	2.6×
iPad mini	768 × 1024	2×
iPad Pro 11"	834 × 1194	2×
Surface Pro	912 × 1368	2×
Laptop (720p)	1280 × 720	1×
Laptop (1080p)	1366 × 768	1×
Desktop (1080p)	1920 × 1080	1×

什么是视口

视口是网页可以绘制的可见区域——也就是浏览器窗口的内容区域,不包括标签页、地址栏或书签栏。这就是为什么它几乎总是比你的屏幕分辨率小:屏幕是整块面板,而视口只是页面可以使用的那一部分。window.innerWidth 和 window.innerHeight 以 CSS 像素报告该区域,而 documentElement.clientWidth/clientHeight 报告的是布局视口(同一区域,若存在经典滚动条,则会减去其宽度)。由于视口会在你调整窗口大小、进行分屏或旋转设备的瞬间发生变化,它才是响应式布局真正响应的数值。

CSS 像素与设备像素以及 devicePixelRatio

CSS 像素是一个布局单位,并不是面板上的物理点。在标准显示屏上,一个 CSS 像素对应一个物理像素,但高密度的 “Retina” 屏幕会将两到三个物理像素压缩进每个 CSS 像素中,从而使文字看起来更清晰。window.devicePixelRatio 会告诉你这个倍数:数值为 2 意味着一个 1440 CSS 像素宽的视口是用 2880 个物理像素绘制的。网页是以 CSS 像素为单位进行布局的,因此一部报告视口宽度为 390 像素、DPR 为 3 的手机,其物理面板宽度大约为 1170 像素。若要查看屏幕的完整物理分辨率和像素密度,请使用 “我的屏幕尺寸是多少” 和 “屏幕分辨率测试” 工具。

响应式断点

断点是指布局发生变化的视口宽度——列会堆叠、菜单会折叠、字号会调整。CSS 媒体查询以及 Tailwind CSS 等实用工具框架会定义一小组具名宽度,并从该宽度起向上应用样式。Tailwind 的默认值为:sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px;低于 640px 则属于不带前缀的 base 区间。下方的参考表会在你调整窗口大小时高亮显示当前所处的区间,可拖动的测试面板会报告其自身宽度会命中哪个断点——这是一种无需改变整个窗口大小、就能快速预览组件在不同尺寸下表现的方法。

为什么 innerWidth 与屏幕宽度不同

在你的面板分辨率与页面所看到的视口之间,存在若干干扰因素。浏览器外壳(标签页、工具栏和可见的滚动条)会从可用区域中被减去。页面缩放也会改变它:放大会减少能容纳的 CSS 像素数量,因此即使窗口没有移动,innerWidth 也会下降,同时这也会轻微影响 devicePixelRatio。在移动端,meta viewport 标签——<meta name="viewport" content="width=device-width, initial-scale=1">——会告诉浏览器将布局视口设置为设备本身的宽度,而不是假装自己是一台约 980px 宽的桌面设备,这也是响应式网站需要它的原因。操作系统的显示缩放同样会改变 CSS 像素的数量,这就是为什么两台完全相同的显示器可能会报告不同的视口尺寸。