使用方法
- 打开页面后，页面会立即从浏览器读取这些值。
- 调整窗口大小或旋转设备，即可查看视口尺寸和方向的变化。
- 使用“复制全部”，将设备信息粘贴到错误报告或支持请求中。
工作原理
浏览器报告的尺寸以 CSS 像素为单位，这是网页布局使用的单位。在高像素密度显示屏上，一个 CSS 像素会由多个物理像素绘制；设备像素比 (DPR) 表示两者的比例。一部报告尺寸为 390 × 844、DPR 为 3 的手机，其屏幕面板约有 1170 × 2532 个设备像素。在桌面设备上，浏览器缩放和操作系统显示缩放都会改变 DPR 和 CSS 尺寸，因此，经过 125% 缩放的 2560 × 1440 显示器会报告 2048 × 1152。
屏幕分辨率指整个显示屏；可用屏幕空间不包括 Windows 任务栏或 macOS 菜单栏等常驻的操作系统栏；视口则是浏览器窗口中显示网页的区域，不包括工具栏，但包括滚动条。CSS 媒体查询（如 min-width: 768px）会根据视口尺寸响应，因此测试响应式布局时应查看这个数值。
配色方案和减少动态效果的设置来自与网站适配系统设置时使用的相同 CSS 媒体特性。浏览器品牌、平台和移动设备信息来自 User-Agent Client Hints，只有基于 Chromium 的浏览器会提供这些信息。为减少浏览器指纹识别，一些浏览器会对这些值进行取整或固定处理，因此显示结果可能与实际硬件不完全一致。
示例
测试响应式布局
同事的笔记本电脑上有个布局显示异常。他们复制了设备信息，发现视口为 1280 × 649、DPR 为 1.5。将浏览器的设备工具栏设为相同的视口尺寸，即可复现问题。
选择图片尺寸
一张商品图片以 400 CSS 像素的宽度显示。在 DPR 为 3 的手机上，要让图片看起来清晰，需要 1200 像素宽，这样你就知道该在 srcset 中包含哪些尺寸。
检查显示器缩放
一台 3840 × 2160 的显示器报告的尺寸为 2560 × 1440，DPR 为 1.5：Windows 将显示缩放设置为 150%。
常见问题
为什么屏幕分辨率与显示器规格不一致？
浏览器报告的是 CSS 像素，即物理像素除以缩放比例后的数值。乘以设备像素比，可大致得出硬件分辨率。浏览器缩放也会改变报告的数值。
屏幕尺寸和视口尺寸有什么区别？
屏幕尺寸指整个显示屏。视口只是浏览器窗口内绘制网页的区域，因此尺寸更小，并会随窗口大小变化或开发者工具的打开而改变。
这些信息会被用于追踪我吗？
本页面不会使用这些信息进行追踪：这些值只会显示给你，不会存储或发送到任何地方。网站可以读取相同的值，因此一些浏览器会对其取整，以增加指纹识别的难度。
为什么我的笔记本电脑显示支持触控？
触控支持情况根据浏览器报告的触控点数量判断。带触摸屏的笔记本电脑即使主要使用鼠标，也会报告触控点；有些驱动程序或远程桌面环境即使没有触摸屏，也会报告支持触控。
隐私
所有值均由浏览器中的 JavaScript 读取，仅显示给你。不会存储、上传或纳入分析；系统只会记录一条匿名事件，表明该工具已打开并使用。