屏幕信息

一览你的屏幕、视口与设备实时数值

屏幕分辨率

宽高比: -

可用大小

视口大小

调整窗口大小时实时更新

像素比（DPR）

颜色深度

屏幕方向

触摸支持

语言

时区

即时查看你的屏幕分辨率、实时视口大小、devicePixelRatio、颜色深度、屏幕方向、触摸支持、语言和时区——全部在浏览器本地读取，无需上传。调整窗口大小时，视口和方向数值会实时更新，是响应式设计测试和快速设备检查的好帮手。

如何解读这些卡片

页面加载时九张卡片会自动填充，不需要输入或粘贴任何内容。R 显示屏幕分辨率及其简化宽高比，A 是可用大小，V 是实时视口，P 是设备像素比，C 是颜色深度，O 是方向，T 是触摸支持，L 是浏览器语言，Z 是 IANA 时区。

视口和方向是唯二实时的卡片：每次窗口缩放都会重新计算。其余卡片描述显示器和环境，除非窗口移到特性不同的显示器上，否则保持不变。所有数值都从标准的 window、screen 和 navigator 对象读取，不涉及任何网络请求。

颜色深度卡片报告每像素位数——24 位是常见的真彩值，30 位或 32 位则意味着广色域或支持 HDR 的设置。语言卡片是浏览器首选的 Accept-Language 项，可用于排查为什么页面把德语发给了期待英语的人。时区卡片是该设备上 Intl API 进行日期格式化时会使用的 IANA 区域。

实用技巧

响应式测试： 拖动窗口边缘，让视口宽度跨越你的断点，这样能抓到在操作系统缩放下于错误 CSS 宽度触发的规则。
HiDPI 素材： 在 1x、2x、3x 图片变体之间选择前先读 DPR，并记住 srcset 度量的是 CSS 槽位尺寸。
缺陷报告： 贴出精确的分辨率、视口、DPR 和系统缩放，让布局问题可以被复现而不是靠猜。
跨设备 QA： 把笔记本、平板和手机并排比较方向与触摸结果。
本地化检查： 在把格式问题归咎于代码之前，先确认页面将看到的语言和时区。

分辨率、可用大小与视口的区别

这三个数字描述的是三个不同的矩形，混淆它们会导致真实的 bug。

屏幕分辨率是显示器以设备无关像素报告的值。可用大小从整个屏幕中减去 Windows 任务栏或 macOS 菜单栏与 Dock 这类操作系统界面，是最大化窗口能占据的最大区域。视口还要更小：它是浏览器窗口内的可绘制区域，也是 CSS 媒体查询唯一能测量的那个。

在一台带 40 像素任务栏的 1920 × 1080 Windows 显示器上，最大化窗口报告的可用高度是 1040，而视口因为浏览器自身的界面还要更小。响应式布局必须针对视口，所以这个工具让视口值保持实时，同时把它和硬件数值并排显示。

devicePixelRatio 与素材选择

devicePixelRatio（DPR）是支撑一个 CSS 像素的物理像素数量。值为 2 表示 Retina 级屏幕，1440 × 900 的 CSS 区域绘制在 2880 × 1800 的物理像素上。值 1.25 则来自标准密度面板上的 125% 系统缩放。

对图片而言，DPR 决定了你该提供哪个源文件：一个 400 像素宽的显示槽位在 DPR 1 下需要 400 像素素材，DPR 2 下需要 800 像素，DPR 3 下需要 1200 像素。浏览器在解析 srcset 时使用这个比例，因此正确编写了 1x、2x、3x 候选的 srcset 能让浏览器自行挑出最清晰又合理的文件。

实操示例：一台 Retina 笔记本和一台缩放过的 Windows 电脑

在一台配备 2560 × 1600 面板、以 DPR 2 运行的 13 英寸笔记本上，卡片报告屏幕 1280 × 800、宽高比 8:5，乘以像素比后得到物理 2560 × 1600。如果最大化视口是 1280 × 720，方向为横屏，@media (max-width: 768px) 规则不会触发，而 max-width: 1200px 规则会。

在一台以 125% 缩放运行的 1920 × 1080 Windows 机器上，卡片报告屏幕 1536 × 864，DPR 为 1.25。同一条 768 像素的媒体查询依然不会触发，尽管这台显示器比笔记本更大——因为查询看到的是 CSS 像素，而不是面板像素。把系统缩放改成 150% 会把报告宽度降到 1280，可能突然触发平板断点，这是「在同事机器上看起来不一样」这类反馈的常见原因。

准确性与局限

这些数值正是浏览器所暴露的内容，浏览器会刻意限制细节以减少指纹识别。有些浏览器会对 screen 尺寸取整，或在严格的隐私设置下限制它们，所以报告的分辨率可能是近似值。浏览器缩放会改变视口和 DPR，因此信任数字之前请先缩放回 100%。

触摸检测是能力检查，在触屏笔记本上存在已知的误报；它不能告诉你手指是否是主指针。语言卡片显示的是 navigator.language，即用户的最高偏好，而不是完整的有序列表。时区来自 Intl API 解析出的区域，通常是 IANA 名称，不过部分平台会返回别名。最后，可用大小并不保证窗口真能达到它——窗口管理器可能额外保留空间。

常见问题

为什么我的视口比屏幕分辨率小？

屏幕分辨率是整个面板（screen.width × screen.height），而视口是浏览器窗口内用于渲染网页的可绘制区域。工具栏、标签栏、滚动条、停靠的开发者工具面板和窗口边框都会把它缩小。改变窗口大小，视口卡片会实时更新。

为什么 1920 × 1080 的笔记本报告的视口接近 1536 × 864？

这台机器很可能以 125% 缩放运行 Windows，于是浏览器按设备无关像素工作，devicePixelRatio 为 1.25，1920 ÷ 1.25 = 1536。面板物理上宽 1920 像素，但在 CSS 看来只有 1536 像素。

为什么宽高比显示 683:384 而不是 16:9？

比例是按精确像素尺寸的最大公约数约分得到的，不会四舍五入成常见标签。1366 × 768 的公约数是 2，得到 683:384。1920 × 1080 约分为 16:9，1920 × 1200 约分为 8:5，与 16:10 相同。

为什么触屏笔记本即便我用鼠标也报告支持触摸？

只要三个信号之一为真就会报告触摸：navigator.maxTouchPoints 大于零、存在 ontouchstart 事件、或主指针为 coarse。带触摸屏的二合一设备满足第一条，哪怕鼠标才是你的主要输入方式，所以应把结果看作设备能力，而非当前实际使用的输入方式。

方向卡片依据的是设备传感器还是窗口形状？

它来自实时视口尺寸，因此只有当可绘制区域的高度大于宽度时才会翻转为竖屏。正方形视口算作横屏。这与手机的重力传感器不同——后者可能在你把页面铺在宽窗口时仍报告竖屏。

为什么 screen.width 比显示器的标称分辨率低？

在 HiDPI 屏幕上，浏览器报告的是设备无关的 CSS 像素。2880 × 1800 的面板在 devicePixelRatio 为 2 时报告 screen.width 为 1440、screen.height 为 900。把报告值乘以像素比就能还原物理分辨率。

由 HandyTools Hub 团队审校 · 最后更新2026-09-11