屏幕分辨率信息

屏幕分辨率信息检测工具使用指南

📌 简介

屏幕分辨率信息检测工具是一款面向前端开发者、UI 设计师和测试工程师的在线实用工具。在开发响应式网页、调试移动端适配或排查 UI 错位问题时，准确获取当前设备的屏幕参数至关重要。本工具无需安装，打开页面即可实时展示物理屏幕分辨率、当前浏览器视口大小（Viewport）、设备像素比（DPR）以及系统语言等核心信息。

📖 什么是 DPR（设备像素比）？

在早期的显示器上，1 个 CSS 像素就等于 1 个物理像素点。但随着 Retina 屏幕（如苹果的 Mac、iPhone）的普及，为了在极小的物理空间内塞进更多的像素以提升清晰度，引入了 DPR（Device Pixel Ratio）的概念。例如，在 DPR 为 2 的屏幕上，1 个 CSS 像素会被渲染成 2×2 个物理像素。这意味着如果您在网页中放入一张 100x100 像素的图片，在 DPR 为 2 的屏幕上它可能会显得模糊。因此，前端开发者通常需要准备 2 倍图（200x200），并通过 CSS 缩小一半来保证高清显示。本工具能帮您快速确认当前设备的 DPR 值。

💼 常见应用场景

• 响应式调试： 调整浏览器窗口时，实时查看视口尺寸以验证 CSS 媒体查询（Media Queries）是否生效。
• UI 走查： 测试人员确认设计稿与页面在实际设备上的尺寸映射关系。
• 机型判断： 通过屏幕分辨率反查用户使用的是哪种型号的手机或显示器。

⚙️ 使用步骤

1. 打开页面，所有信息即刻自动加载。
2. 如果您缩放浏览器窗口，中间高亮的“当前视口”数值会实时变化。
3. 直接查看右侧面板中的各项系统参数。

⚠️ 注意事项

• 浏览器出于隐私保护，有时不会提供非常精确的物理分辨率，而是提供经过四舍五入的值。
• 如果您使用了浏览器的“开发者工具”模拟手机模式，这里显示的将是模拟设备（如 iPhone 12）的参数，而非您的真实电脑参数。

❓ 常见问题 (FAQ)