Screen Resolution and Device Pixel Ratio Diagnostic Tool

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.