屏幕参数查看器

屏幕参数查看器 — 实时检测你的设备屏幕信息

屏幕参数查看器是一款运行在浏览器中的在线工具，无需安装任何软件，打开即可实时查看当前设备的完整屏幕与视口参数。无论你是前端开发者、UI/UX 设计师，还是普通用户，都可以通过本工具快速了解屏幕相关的技术指标。

核心功能

• 屏幕分辨率：显示设备物理像素的宽高，即屏幕的实际分辨率（如 1920×1080）。
• 视口大小：显示浏览器当前可视区域的 CSS 像素宽高，随窗口大小实时变化。
• 可用屏幕尺寸：排除操作系统任务栏后的实际可用屏幕区域。
• 设备像素比（DPR）：物理像素与 CSS 像素的比值，用于判断是否为视网膜屏/高分辨率屏。
• 文档尺寸与滚动偏移：完整页面的宽高，以及当前水平/垂直滚动位置。
• 浏览器缩放级别：当前浏览器页面的缩放百分比。
• 色彩深度与像素深度：屏幕每像素的色彩位数，判断是否支持真彩色或深色域。
• 色域支持：检测当前屏幕是否支持 sRGB、P3 Wide、Rec.2020 广色域。
• 深色模式：检测操作系统当前是否启用了深色（Dark Mode）颜色方案。
• HDR 支持：检测屏幕是否支持高动态范围（High Dynamic Range）显示。
• 屏幕方向：实时显示设备当前是横向（Landscape）还是纵向（Portrait），并显示旋转角度。
• 设备类型识别：自动判断当前设备为手机、平板、桌面端或大屏显示器。

适用场景

• 前端开发调试：快速确认视口尺寸、DPR、缩放级别，辅助响应式布局开发与断点调试。
• UI/UX 设计参考：了解真实用户设备的屏幕参数，为设计稿尺寸和适配方案提供数据支撑。
• 设备信息核查：在购买或使用新设备时，快速验证屏幕规格是否与标称参数一致。
• 跨端兼容测试：在不同设备上打开本工具，对比各端屏幕参数差异，辅助多端适配工作。
• 广色域与 HDR 检测：判断设备是否具备 P3 宽色域或 HDR 显示能力，为内容创作者和摄影师提供参考。

数据实时更新

本工具的所有参数均在浏览器端实时计算，无需联网请求。当你拖动浏览器窗口、调整页面缩放、旋转设备屏幕时，数据会立即自动更新，无需手动刷新页面。

常见问题 FAQ

Q：屏幕分辨率和视口大小有什么区别？

屏幕分辨率是设备硬件的物理像素数（固定不变），视口大小是浏览器当前可视区域的 CSS 像素数（会随窗口大小和缩放变化）。在高 DPR 设备上，物理像素远多于 CSS 像素。

Q：设备像素比（DPR）是什么意思？

DPR（Device Pixel Ratio）是物理像素与 CSS 像素的比值。DPR=2 表示每个 CSS 像素由 2×2=4 个物理像素渲染，即通常所说的"视网膜屏"或"HiDPI 屏"，图像和文字在这类屏幕上显示更加清晰细腻。

Q：为什么检测到的浏览器缩放不是 100%？

浏览器缩放级别是通过 outerWidth / innerWidth 计算得出的估算值。如果你在操作系统层面修改了显示缩放比例，或者浏览器本身设置了默认缩放，都可能导致检测值不为 100%。

Q：P3 Wide 和 sRGB 色域有何不同？

sRGB 是最常见的标准色域，覆盖约 33% 的可见光颜色范围；P3 Wide（DCI-P3）覆盖范围更广，约为 sRGB 的 1.25 倍，常见于苹果、三星等高端设备屏幕，能够显示更鲜艳饱和的色彩。

Q：深色模式检测准确吗？

本工具通过 CSS 媒体查询 prefers-color-scheme: dark 读取操作系统的颜色方案设置，与浏览器自身的深色模式开关保持一致，检测结果准确可靠。