Key Features

• Detects physical screen resolution (e.g. 1920×1080).
• Shows browser viewport width and height (the area your page uses).
• Shows Device Pixel Ratio (DPR) — important for retina/HiDPI displays.
• Shows colour depth (bits per pixel).
• Viewport updates live as you resize the browser.

How to Use the Tool

1. Open the page — all display measurements are detected automatically.
2. Your screen resolution, viewport, DPR, and colour depth are shown.
3. Resize your browser window to see viewport dimensions update live.

Core Benefits

• Check if your monitor is correctly detected by the operating system.
• Verify that a media query breakpoint is triggering at the right viewport width.
• Know your DPR to ensure high-resolution images are served correctly.

Common Use Cases

• A web developer checking what viewport their CSS media query uses.
• Verifying a Retina/HiDPI display is running at 2x DPR.
• Checking screen resolution before screenshot-based documentation.

Pro Tips

• Screen resolution is the physical display. Viewport is the browser window's usable area (excludes toolbars).
• A 1440px wide monitor with DPR of 2 means the actual screen has 2880 physical pixels horizontally.
• CSS pixels ≠ physical pixels on HiDPI screens. window.innerWidth returns CSS pixels.