跳到正文
SPCXTools

屏幕分辨率

立即查看您的屏幕分辨率、浏览器视口尺寸、像素比和其他显示详情。

本地运行——文件不会离开你的设备

正在加载工具…

如何使用屏幕分辨率

  1. 1打开页面 — 您的屏幕分辨率会立即显示在顶部。
  2. 2查看下方的详细信息 — CSS 分辨率、设备像素比、视口尺寸、宽高比、色深等。
  3. 3调整浏览器窗口大小或旋转您的设备,数值会实时更新。
  4. 4点击 复制 以分享所有详细信息,例如用于提交错误报告。

我的屏幕分辨率是多少?

您的屏幕分辨率是显示器在水平和垂直方向上显示的像素数量,例如 1920 × 1080。本工具可立即检测出您的分辨率,以及网页设计师、开发人员和技术支持团队通常需要的详细信息:CSS 分辨率、设备像素比、浏览器视口尺寸、可用屏幕空间、宽高比、色深、色域和 HDR 支持情况。所有信息均在本地从您的浏览器中读取。

理解这些数字

物理分辨率 是显示面板上的实际像素数量(在大多数设备上)。它也是制造商宣传的规格,例如 2560 × 1440。

CSS 像素 是网站使用的逻辑单位。当您的系统缩放显示时(例如在 Retina 屏幕上进行 200% 缩放),一个 CSS 像素会覆盖多个物理像素,这样文本在保持可读大小的同时,看起来也更清晰。

设备像素比 将两者联系起来:物理像素 = CSS 像素 × DPR。

视口 是浏览器内部可见的页面区域。当您调整窗口大小、打开开发者工具或显示书签栏时,它会发生变化。

常见屏幕分辨率

名称 分辨率 宽高比
高清 (720p) 1280 × 720 16:9
全高清 (1080p) 1920 × 1080 16:9
WUXGA 1920 × 1200 16:10
QHD (1440p) 2560 × 1440 16:9
UWQHD (超宽屏) 3440 × 1440 21:9
4K 超高清 3840 × 2160 16:9
5K 5120 × 2880 16:9

谁需要这些信息

网页设计师和开发者 需要根据真实的视口尺寸和像素比来测试响应式布局,并利用这些信息来重现访客提交的错误报告。

技术支持和 IT 团队 在排查显示或布局问题时,会需要屏幕的详细信息 — 使用 复制 按钮可以一次性发送所有内容。

游戏玩家和内容创作者 可以确认新显示器是否以其原生分辨率运行,而不是处于缩放或更低分辨率的模式。

购买壁纸、截图或演示文稿的用户 可以根据自己屏幕的精确尺寸来匹配图像,以获得最清晰的效果。

使用 屏幕刷新率测试 查看您的显示器更新速度,或使用 屏幕坏点测试 检查是否有坏点。

常见问题

为什么这里显示的分辨率和我的显示器规格不同?
操作系统通常会对界面进行缩放。一台 3840 × 2160 (4K) 的显示器在 150% 缩放比例下,会向网站报告 2560 × 1440 的“CSS”分辨率,设备像素比为 1.5。顶部的 屏幕分辨率 是将这两者相乘后得出的物理像素。浏览器缩放也会改变像素比,因此请将缩放重置为 100% (Ctrl/Cmd + 0) 以获得准确结果。
什么是设备像素比 (DPR)?
DPR 是指每个 CSS 像素对应的物理像素数量。标准显示器的 DPR 为 1;而 Retina Mac 和大多数手机的 DPR 为 2 或 3。高 DPR 屏幕显示的文本和图像更清晰,因为每个 CSS 像素都由多个物理像素绘制而成。
什么是视口 (viewport),它为什么重要?
视口是浏览器窗口内显示网页的区域,不包括工具栏和标签页。网页设计师使用视口(而非整个屏幕尺寸)来进行响应式布局,因此在报告网站在您设备上的显示效果时,这是最有用的数据。
“可用”屏幕尺寸是什么意思?
它是指屏幕区域减去操作系统永久性元素(如 Windows 任务栏或 macOS 菜单栏和程序坞)后的可用空间,也就是窗口可以达到的最大尺寸,而不会与这些元素重叠。
报告的 HDR 和色域信息准确吗?
它反映了浏览器通过 CSS 媒体查询报告的信息。当显示器和操作系统处于 HDR 模式时,HDR 会显示为支持;广色域 (Display P3) 在苹果设备以及近期的手机和显示器上很常见。