Screen Info: Resolution & Window Size Checker

Viewport

-- × -- px

Screen Resolution

-- × -- px

Device Pixel Ratio (DPR)

-- x
screen.width / height
window.outerWidth / outerHeight
window.innerWidth / innerHeight (Viewport)

Orientation

--

Color Depth

-- bit

Window Size

--

CSS Breakpoint (Tailwind)

--

Below is an exhaustive list of all accessible properties from the browser's global objects.

Property Value

Inspect Your Screen: Resolution, Viewport & DPR 💡

Instantly diagnostic your display resolution, window dimensions, and device pixel ratio in real-time. This tool gives developers and designers a precise breakdown of their environment's technical specifications for responsive testing and asset optimization.

🚀 Key Features

  • Track Resizing in Real-time: Drag your browser window to see dimensions update instantly. No refresh required.
  • Detect CSS Breakpoints: Automatically identify active media query breakpoints, including Tailwind standards (md, lg, xl).
  • Verify Retina & High-DPI Scaling: Check your Device Pixel Ratio (DPR) to understand how the browser maps CSS pixels to physical hardware.
  • Explore Raw Window Data: Search and filter the full window and screen JavaScript objects for deep technical debugging.

🧐 FAQ

What is the difference between Screen and Viewport? "Screen" refers to your monitor's total physical resolution. "Window" is the browser's outer size, while "Viewport" is the specific inner area where your website content actually renders.

Why is my resolution lower than my monitor's specs? This is usually caused by OS scaling (e.g., 150% or 200%). To keep text readable, browsers use "logical resolution," which is smaller than the raw physical pixel count.

Is my private data being sent anywhere? No. This tool runs entirely client-side. All calculations and property listings stay within your local browser.

💡 Tech Trivia

Before Apple’s "Retina" displays, one CSS pixel almost always equaled one physical hardware dot. Today, modern browsers manage a complex mapping of "logical" pixels to physical pixels to ensure clarity on high-density displays. The window.devicePixelRatio property—which this tool visualizes—is the multiplier that makes this possible.