屏幕信息
一览你的屏幕、视口与设备实时数值
-
宽高比: -
-
-
调整窗口大小时实时更新
-
-
-
-
-
-
即时查看你的屏幕分辨率、实时视口大小、devicePixelRatio、颜色深度、屏幕方向、触摸支持、浏览器语言和时区——全部在浏览器本地读取，无需上传。调整窗口大小时，视口和方向数值会实时更新，是响应式设计调试和快速设备检查的好帮手。
如何使用
- 打开页面： 所有数值自动检测，无需输入任何内容。
- 浏览网格： 每张卡片显示一项指标和简短说明。
- 调整窗口： 拖动窗口边缘，观察视口大小和方向实时变化。
- 使用数值： 把分辨率或比例复制到设计工具、缺陷报告或媒体查询中。
功能特性
- 屏幕分辨率，并自动简化宽高比（16:9、4:3 等）
- 可用屏幕大小——完整分辨率减去任务栏和 Dock
- 实时视口大小，随窗口缩放即时更新
- devicePixelRatio，用于识别 Retina/HiDPI 屏幕
- 每像素位数表示的颜色深度
- 屏幕方向随窗口缩放在横屏与竖屏之间切换
- 通过三个独立信号检测触摸支持
- 浏览器语言与 IANA 时区
- 完全本地运行——数据不离开你的浏览器
分辨率、视口和可用大小有何不同？
这三个数字描述的是三个不同的矩形，混淆它们会导致真实的布局 bug。屏幕分辨率是硬件指标：面板有多少物理像素。可用大小是操作系统为任务栏和菜单栏占用一部分后剩下的区域。视口更小——它是浏览器窗口内网页实际绘制的区域，也是 CSS 媒体查询唯一能「看到」的区域。响应式布局必须针对视口而不是设备分辨率，这正是本工具并排显示这些数值并保持视口实时更新的原因。
使用场景
- 响应式设计： 拖动窗口边缘时，实时对照断点检查视口宽度。
- HiDPI 素材： 读取 devicePixelRatio，决定提供 1x、2x 还是 3x 图片。
- 缺陷报告： 贴上你的精确分辨率、宽高比和 DPR，方便他人复现布局问题。
- 跨设备测试： 在笔记本、平板和手机上验证方向和触摸检测结果。
- 本地化检查： 确认页面将看到的浏览器语言和时区。
相关工具
常见问题
为什么我的屏幕分辨率和视口大小不一样？
屏幕分辨率是显示器的物理像素尺寸（screen.width × screen.height）。视口是浏览器窗口中实际渲染网页的区域——它不包含工具栏、滚动条和窗口边框，并且会随着你调整窗口大小而变化。
devicePixelRatio 是什么意思？
devicePixelRatio 表示一个 CSS 像素对应多少个物理像素。值为 2 说明是 Retina 级别的屏幕：1920 × 1080 的 CSS 视口背后是 3840 × 2160 的物理像素。设计师用它来决定何时提供 @2x 或 @3x 图片。
屏幕大小和可用大小有什么区别？
可用大小（screen.availWidth × availHeight）是在完整屏幕尺寸中减去操作系统占用的界面元素，比如 Windows 任务栏或 macOS 菜单栏和 Dock。它是窗口最大化时能占据的最大区域。
触摸支持是如何检测的？
工具检查三个信号：navigator.maxTouchPoints、ontouchstart 事件是否存在，以及 (pointer: coarse) 媒体查询。只要其中任何一个为真，设备就会被判定为支持触摸——这就是为什么许多二合一笔记本即使你主要用鼠标也会显示支持触摸。
这个工具会把我的设备信息发送到别处吗？
不会。所有数值都在本地从浏览器的 window 和 screen 对象读取，不会上传、记录或分享给任何服务器。