Screen Resolution Detector

What Is a Screen Resolution Detector?

This tool reads several real, distinct measurements from your browser: your monitor's actual pixel resolution, the current size of your browser window's content area, your device's pixel ratio, its reported color depth, and its orientation. These are genuinely different numbers that people often conflate, and seeing them side by side clears up a lot of confusion - especially the common question of why a screen's "resolution" doesn't match what a browser window reports.

How to Use the Screen Resolution Detector

1. Load this page and check the readouts - they reflect your current screen and browser state instantly.
2. Resize your browser window to see "Browser Viewport" update live, separate from your screen resolution.
3. On a laptop or phone, rotate the device to see "Orientation" and the viewport update together.
4. Compare "Screen Resolution" to "Effective Pixels" to understand your display's true physical pixel count if it's a high-DPI screen.

How It Works

Screen resolution comes from the browser's screen.width and screen.height properties, reporting your monitor's logical resolution as the operating system reports it. Browser viewport size comes from window.innerWidth and window.innerHeight, which is just the content area of your current browser window - always smaller than your full screen unless the browser is truly fullscreen. Device pixel ratio, from window.devicePixelRatio, tells you how many actual physical pixels are packed into each logical pixel - a ratio of 2x, common on high-DPI "Retina" style displays, means your screen has four times as many physical pixels as its reported logical resolution would suggest. Color depth comes from screen.colorDepth, and orientation from the Screen Orientation API where supported, falling back to a width-versus-height comparison otherwise.

Understanding Your Results

• Screen Resolution and Effective Pixels match - you're on a standard-DPI display with a 1x pixel ratio, common on many external monitors.
• Effective Pixels is noticeably higher than Screen Resolution - you're on a high-DPI display (2x or higher), where the operating system reports a smaller logical resolution than the true physical pixel count for sharper rendering.
• Browser Viewport smaller than Screen Resolution - completely normal; it just means your browser window isn't currently filling the entire screen, or your OS reserves space for a taskbar or menu bar.
• Available Screen Area smaller than Screen Resolution - the difference is typically space reserved by your operating system's taskbar, dock, or menu bar.

Browser Limitations

These values reflect what your operating system reports to the browser, which is occasionally affected by OS-level display scaling settings - a monitor set to 150% scaling in Windows, for example, will report a logical resolution lower than its native physical resolution. This tool reports exactly what the browser receives; it cannot see past OS scaling to your monitor's true native panel resolution if scaling is active.

Common Mistakes to Avoid

• Confusing viewport size with screen resolution - they're different measurements; a maximized browser window still isn't the same as your full screen resolution if there's a taskbar.
• Assuming "1x" pixel ratio means a low-quality screen - many perfectly good external monitors report a 1x ratio; pixel ratio measures density, not overall quality.
• Testing in a non-maximized, resized window and expecting screen-wide numbers - resize or maximize your browser to get the full picture of your available screen space.

Frequently Asked Questions

Conclusion

Resolution, viewport, and pixel ratio are three genuinely different numbers, and seeing them together here clears up most of the confusion around why they don't always match. If you also want to check your display's refresh rate, pair this with the Refresh Rate Test.