Productive Toolbox

Screen Resolution Checker

Display current viewport, screen resolution, DPR, and orientation. Useful for responsive debugging.

Detecting your screen resolution, viewport and pixel ratio…

💡 Metrics Explained

Screen Resolution: Physical screen dimensions
Viewport Size: Visible area inside browser window
Device Pixel Ratio: Physical pixels per CSS pixel (1 = standard, 2+ = retina)
Orientation: Portrait or landscape mode
Color Depth: Number of bits per pixel (24-bit = 16.7M colors)

Related tools

User Agent ParserHTTP Status Code LookupBase32 Encoder / DecoderCSV to JSON ConverterYAML to JSON ConverterUUID / CUID GeneratorJSON ValidatorBase64 Encoder/Decoder

Screen Resolution Checker

The Screen Resolution Checker is a fast, online developer utility that instantly displays detailed information about your device screen and browser viewport. It helps developers, QA testers, designers, and support teams quickly identify screen-related properties needed for responsive design debugging and bug reporting.

Key Features

  • Real-time screen resolution detection
  • Viewport size display with instant updates
  • Device pixel ratio (DPR) indicator for retina displays
  • Screen orientation detection (portrait/landscape)
  • Color depth information
  • Browser window dimensions
  • Available screen size metrics
  • Aspect ratio calculation
  • Retina/high-density display detection
  • Copy metrics to clipboard in multiple formats
  • JSON export for programmatic use
  • Bug report format for easy sharing
  • Metrics history tracking
  • Real-time updates on window resize
  • Real-time updates on device orientation change

Why Use This Tool?

Responsive design testing is essential in modern development workflows. This tool provides instant diagnostic information without requiring any user input or configuration.

For Front-end Developers: Quickly verify viewport dimensions and DPR when testing CSS breakpoints and responsive layouts.

For QA Testers: Document exact device specifications when reporting responsive design bugs. The bug report format makes it easy to include in issue tickets.

For Designers: Verify that designs are rendering correctly at different screen sizes and pixel densities.

For Support Teams: Help users troubleshoot display issues by asking them to share their screen metrics.

Understanding the Metrics

Screen Resolution

The physical dimensions of your monitor or device screen in pixels. This is the total screen size, not just the browser window.

Viewport Size

The visible area of the webpage inside the browser window. This is what matters for responsive design testing. It excludes browser UI elements like toolbars and scrollbars.

Device Pixel Ratio (DPR)

The ratio of physical pixels to CSS pixels. A DPR of 1 means standard resolution. A DPR of 2 or higher indicates a retina or high-density display where 2 physical pixels equal 1 CSS pixel.

Orientation

Whether the device is in portrait (taller than wide) or landscape (wider than tall) mode. Mobile devices update this automatically when rotated.

Color Depth

The number of bits used to represent color for each pixel. 24-bit color provides 16.7 million colors, which is standard for modern displays.

Aspect Ratio

The proportional relationship between screen width and height. Common ratios include 16:9 (widescreen), 4:3 (standard), and 19.5:9 (mobile).

Real-World Examples

Desktop Testing

On a laptop with a 1920×1080 screen, the viewport might be 1440×820 (accounting for browser UI). DPR is typically 1 for standard displays.

Mobile Testing

On an iPhone 14, the screen resolution is 1170×2532, but the viewport is 390×844. The DPR is 3, meaning each CSS pixel is 3 physical pixels.

Orientation Change

When you rotate your phone from portrait to landscape, the viewport dimensions swap, orientation changes, and the tool updates automatically.

How to Use

  1. Open the tool in your browser
  2. All metrics display automatically - no input needed
  3. Resize your browser window to see viewport dimensions update in real-time
  4. On mobile, rotate your device to see orientation and viewport changes
  5. Click "Copy JSON" to copy all metrics as JSON
  6. Click "Copy Bug Report" to copy a formatted report for sharing
  7. Click "Export JSON" to download metrics as a file
  8. View your metrics history to track changes over time

Performance & Privacy

We do not collect or store what you enter. The tool loads instantly and updates metrics in real-time with minimal performance impact.

Related Tools

User Agent Parser

Detect and display current browser name, version, OS, device type from the User-Agent string.

HTTP Status Code Lookup

Searchable encyclopedia of all HTTP status codes with descriptions, use cases, and examples.

Base32 Encoder / Decoder

Encode and decode text using Base32 — used in 2FA secrets and legacy systems.

CSV to JSON Converter

Parse CSV text or files into structured JSON. Preview table, download JSON, copy to clipboard.

YAML to JSON Converter

Paste YAML data and instantly convert it to valid JSON with syntax highlighting and error checking.

UUID / CUID Generator

Generate UUIDs (v1, v4), CUIDs, and NanoIDs for testing. Copy single or bulk output.

JSON Validator

Check JSON for syntax errors.

Base64 Encoder/Decoder

Convert text to/from Base64 strings.

URL Encoder/Decoder

Convert special characters in URLs to %xx format.

JWT Debugger

Decode and inspect JSON Web Tokens instantly.

JSON to CSV

Flatten JSON objects into spreadsheet file.

XML to JSON

Translate XML data into modern JSON format.

Browse all 18 Developer Tools →