Screen & Browser Info

View real-time screen resolution, window size, browser and device details

What is it and how does it work?

Screen information — resolution, pixel density, device pixel ratio, color depth, orientation, and viewport dimensions — is essential context for responsive web design, debugging display issues, and hardware troubleshooting. What you see in your browser is shaped by these values: a "2560×1440" monitor at 2× device pixel ratio means the CSS viewport is 1280×720 pixels, but images must be 2560×1440 to appear sharp.

This tool reads your browser's Screen and Window APIs to display your current screen resolution, viewport dimensions, device pixel ratio (DPR), color depth, and orientation. It also shows whether your device supports touch events and reports your screen's reported refresh rate. Understanding these values is crucial for testing responsive breakpoints, optimizing image assets for HiDPI/Retina displays, and diagnosing layout issues that only appear on specific screen sizes.

Common use cases

• HiDPI debugging: if images look blurry on a MacBook Pro, check the DPR — it's typically 2. Images must be served at 2× their CSS size (srcset or CSS background-size) to appear sharp on Retina displays.
• Responsive breakpoint testing: check your current viewport width in pixels to verify your CSS breakpoints are triggering at the right sizes without needing browser devtools.
• QA verification: when a client reports a layout bug "on mobile", get the actual screen dimensions and DPR from their device (using this tool) to reproduce the exact environment in devtools.

Frequently asked questions

What is the device pixel ratio (DPR)?

DPR is the ratio of physical pixels to CSS pixels. A DPR of 1 means 1 physical pixel per CSS pixel (standard displays). A DPR of 2 (Retina, HiDPI) means 4 physical pixels per CSS pixel — 2×2. A 1px CSS border is rendered as 2 physical pixels wide. Images displayed at 100px CSS width need to be 200px wide in pixels to appear sharp. Use `window.devicePixelRatio` in JavaScript.

What is the difference between screen resolution and viewport size?

Screen resolution (`screen.width` × `screen.height`) is the full display resolution of the monitor in CSS pixels. Viewport size (`window.innerWidth` × `window.innerHeight`) is the visible browser window area, excluding toolbars and scrollbars. Viewport is almost always smaller than screen. Media queries use viewport dimensions, not screen resolution.

What is color depth and does it matter for web design?

Color depth is the number of bits used to represent each pixel's color. 24-bit (8 bits each for R, G, B) is standard for most displays, supporting 16.7 million colors. 30-bit and 32-bit HDR displays are becoming more common. For web design, color depth rarely matters — all modern displays support the full sRGB gamut. It becomes relevant only when working with HDR color spaces or wide-gamut images.

How do I test different screen sizes without a real device?

Browser devtools (F12) → Toggle Device Toolbar (Ctrl+Shift+M in Chrome) lets you simulate any viewport size and DPR, including presets for iPhone, iPad, Pixel, Galaxy. For accurate touch event simulation, use the "touch" emulation mode. For exact reproduction of a client's bug, match their exact reported screen.width, window.innerWidth, and devicePixelRatio values in devtools.

Utility

Password Generator · QR Code Generator · Stopwatch · Countdown Timer · Calculator · Random Number Generator