Screen Resolution Checker

What this tool does

Screen Resolution Checker reports your display’s native resolution, available screen area, current browser viewport size, device pixel ratio, effective physical resolution and colour depth, updating live as you resize the browser window or rotate your device.

A single device can report several different, equally valid "size" numbers at once: the monitor’s native resolution, the browser window’s available viewport, and the effective physical pixel count once device pixel ratio (common on phones and modern laptops) is factored in, confusing without seeing them side by side.

This tool reads all of these directly from the Screen and Window APIs and updates live as you resize the browser window or rotate your device, making it easy to see exactly how each figure responds to layout changes in real time.

How to use Screen Resolution Checker

1. Open the tool, your display info is read automatically.
2. Resize the browser window or rotate your device to watch values update live.
3. Compare Screen resolution against Viewport size to understand the difference.
4. Note the Device pixel ratio when working on high-DPI-aware layouts.

Tips for better results

• "Screen resolution" is your monitor’s fixed native pixel count; "Viewport size" is just the browser window’s content area, which changes constantly as you resize and is almost always smaller than the full screen.
• Device pixel ratio above 1 (very common on phones and modern "Retina"-style laptop displays) means each CSS pixel renders using more than one physical pixel, for sharper text and images at the same apparent size.
• "Effective physical resolution" multiplies the screen resolution by the device pixel ratio, giving the actual physical pixel count your display panel uses, versus the lower CSS-pixel resolution websites design against.
• Colour depth of 24-bit (8 bits per RGB channel) is standard on nearly all modern displays; some high-end displays and OS/browser combinations support 30-bit (10-bit per channel) for a wider colour range.

Common use cases

• Checking your display’s exact specifications for a support request or bug report.
• Understanding the practical difference between screen resolution and browser viewport size during responsive web design.
• Verifying device pixel ratio behaviour while testing a high-DPI/Retina-aware layout.
• Watching viewport values update live while testing a responsive design’s breakpoints.

Common mistakes to avoid

• Designing a layout around "Screen resolution" when "Viewport size" is almost always the more relevant figure for web design, since browser chrome, other windows, and multi-monitor setups all reduce the actual visible content area.
• Forgetting device pixel ratio when working with canvas or image rendering, images sized for 1x pixel density will look soft on a 2x or 3x device unless upscaled appropriately.
• Assuming "Number of displays" is always reported; it depends on the Window Management API being supported and permitted, which isn’t universal across browsers.