Screen Resolution Checker

What the Screen Resolution Checker Does

Open it and you immediately see a panel of measurements: the full screen size, the visible browser viewport, the device pixel ratio, the colour depth, an effective-pixels estimate and the orientation. It is the quick way to check what resolution you are actually working at.

The values come straight from your browser's view of the device, so they reflect this screen, this window and any zoom or scaling you have applied. Resize the window and the viewport figure updates live.

How It Works

The tool reads the standard screen and window properties your browser exposes: the screen dimensions, the inner window size, the device pixel ratio, the colour depth and the orientation. It multiplies the screen size by the pixel ratio to estimate the physical resolution and shows everything together.

These figures are in CSS pixels — the logical unit web pages use — not raw hardware pixels. On a high-density display the device pixel ratio is greater than one, so the real screen has more physical pixels than the CSS figure suggests; that is why the effective-pixels number is larger.

Generation algorithm

1. Read the device properties. Take the screen size, window size, pixel ratio, colour depth and orientation from the browser.
2. Estimate physical pixels. Multiply the screen size by the device pixel ratio for an effective-resolution figure.
3. Display the panel. Show all the measurements together.
4. Update on resize. Refresh the viewport and related figures when you resize the window.

Effective pixels

Screen and viewport are reported in CSS pixels; the pixel ratio bridges CSS pixels and the physical hardware pixels.

Technical Details

Standards & references

• CSS pixels — a CSS pixel is the logical unit web pages use, defined as one ninety-sixth of an inch; the screen and viewport figures are in CSS pixels, not raw hardware pixels.
• Device pixel ratio — the ratio of physical pixels to CSS pixels — one on a standard display, two on a typical high-density (Retina) screen, and sometimes a fraction like 1.5 — which is how a screen can have more real pixels than its CSS size.
• Viewport vs screen — the screen is the whole display; the viewport is the visible area inside the browser window, so it is smaller and changes with the window size and zoom.

Accuracy & Limitations

The screen and viewport figures are in CSS pixels, so they may not match the resolution printed on your monitor's box. A display sold as 4K can report a smaller CSS size because the operating system scales it and the device pixel ratio accounts for the rest.

The viewport changes with the window and zoom. Maximise or resize the window, or zoom in, and the viewport figure moves; the screen figure stays fixed for the display.

The effective-pixels figure is an estimate. Multiplying the CSS screen size by the pixel ratio approximates the physical resolution, but operating-system scaling settings can make the true hardware count differ slightly.

On a multi-monitor setup it reports the screen the browser window is on. Move the window to another display and reopen the tool to read that screen instead.

It reads what the browser exposes, which a few privacy settings or browsers can round or limit. The values are reliable for general use but are not a substitute for a hardware diagnostic.

Real-World Use Cases

When to use it — and when not to

Need the monitor's exact hardware resolution and specs? Check your operating system's display settings or the manufacturer's documentation. Testing many device sizes? Use your browser's responsive design mode.

Frequently Asked Questions

References

• Window: devicePixelRatio property (MDN Web Docs)
• Device pixel (MDN glossary)
• Window: screen property (MDN Web Docs)

Related Tools