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
- Open this tool to view your browser-reported Screen Size, Layout Viewport, device pixel ratio (DPR), available screen area, color depth, orientation, and visual viewport measurements. No Start button or permission is required.
- Resize the browser window or rotate your device and watch the live values and viewport-width comparison bars update. The layout viewport is measured in CSS pixels and can differ from the full screen size.
- Check the Approx. Screen Output Pixels field to see screen CSS size multiplied by DPR. Treat this as an approximation, not a verified native panel resolution; OS scaling, browser zoom, and privacy rounding may affect it.
- Choose Compare in Fullscreen to compare the expanded viewport to your reported screen size. Use the on-screen Exit button or Esc to close. Some browsers may show a fullscreen-style fallback instead.
- Use Freeze Readings to hold the current values while you inspect them, and Resume Live or Refresh Now to update the display again. Visual viewport scale reflects pinch zoom when available, not necessarily desktop browser zoom.
- Select Save Snapshot before and after resizing, zooming, or changing displays to compare readings in the session table. Use Copy JSON or Export CSV to keep the data, and Clear Snapshots to start fresh. Saved snapshots remain only in this page until exported.
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
Why is my "Effective Pixels" number so much higher than my resolution?
This happens on high-DPI displays, where your device pixel ratio is greater than 1 - a common example is a 2x ratio, meaning each logical pixel is actually rendered using four physical pixels for sharper detail.
Does this show me my monitor's true native resolution?
It shows what your operating system reports to the browser, which reflects any active display scaling settings. If OS-level scaling is applied, the reported logical resolution can differ from your monitor's physical native panel resolution.
Why does my viewport size change when I resize the browser?
The viewport specifically measures your browser window's content area, so it updates live any time you resize the window - it's intentionally separate from your fixed screen resolution.
Is any of this information sent anywhere?
No. Every value is read and displayed entirely within your browser and is never transmitted or stored anywhere.
Why does orientation show "landscape" on my desktop monitor?
Desktop monitors don't rotate, but the Orientation readout still reports landscape or portrait based on whether width or height is greater, which is accurate even for a fixed desktop display.
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.