Instantly check your screen resolution, device pixel ratio (DPR), viewport size, and color depth with this free, accurate, browser-based diagnostic utility.
AI Generation Prompt
Screen Resolution and Device Pixel Ratio Diagnostic Tool Specification
This web-based tool provides developers, designers, and testers with a precise, real-time readout of display characteristics. It eliminates the guesswork involved in media query testing and asset optimization.
Core Functionality
- Real-Time Detection: Automatically calculates and displays live values on page load and window resize events.
- Metric Breakdown:
- Physical Resolution: Total width and height in hardware pixels.
- Logical Resolution: CSS pixel width and height (viewport size).
- Device Pixel Ratio (DPR): The multiplier for high-density displays.
- Color Depth: Current bit-depth of the monitor.
- Orientation: Portrait or Landscape mode.
- Interaction Capabilities: Detection of touch capability, pointer precision, and hover support.
Technical Features
- Live Resizing: An event listener updates values instantaneously when the user drags the browser window corner.
- Copy-to-Clipboard: A single button to copy all technical data as a formatted string for Jira/Trello tickets.
- Breakpoint Visualization: A visual ruler indicating where standard desktop, tablet, and mobile breakpoints occur compared to the current viewport.
- Exportable Report: A feature to download a JSON file containing all captured metrics.
User Interface & Experience
- Layout: A clean, centered dashboard with large, readable typography for primary metrics (Resolution/DPR).
- Animations: Subtle CSS transitions when values update during resize events.
- Color Scheme: High-contrast, accessibility-focused colors (dark mode by default for developers) with clear visual cues for data points.
- Design System: Responsive CSS Grid layout ensuring the tool itself scales perfectly on all tested resolutions.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is the device pixel ratio (DPR)?
Device Pixel Ratio (DPR) is the ratio between physical hardware pixels and CSS logical pixels. It is essential for determining if a screen is a high-density display and for serving appropriate image resolutions in responsive design.
Why use an online screen resolution diagnostic tool?
It helps web developers and designers verify responsive design breakpoints, debug CSS media queries, and confirm that assets are rendering correctly across different display environments.
Is this tool compatible with mobile devices?
Yes, this utility is fully responsive and works on mobile, tablet, and desktop browsers to provide accurate data for any connected display.
