Screen Resolution Checker
Viewport, Ratio And Pixel Density

What A Screen Resolution Checker Does For You

Screen numbers hide in three different places. Your system knows one size, the browser window knows another, and your page sees a third. So a screen resolution checker puts all three side by side, and then the gaps between them finally make sense.

There is nothing to set up. Because the page reads every value the moment it loads, your screen size, your viewport and your pixel ratio sit on screen before you touch anything.

Four panels share one page. As a result, you can move from the plain screen size to the aspect ratio, the device pixel ratio (DPR) and the refresh rate without leaving the tab.

Everything runs in your browser. So none of these readings reach this site, and we store nothing.

How The Screen Resolution Checker Works

First, the tool asks your browser for the screen object. Then it measures the window itself. Next, it divides one by the other, so the pixel ratio and the native pixel count fall out of the same two readings.

The tool guesses nothing. Because every line comes from a documented browser property, you can check each one yourself in a console if you want to.

What Is My Screen Resolution?

The headline pair is the one most people arrive for. So the top of the page shows your screen width and height, written the way a spec sheet writes them, such as 1920 by 1080.

That pair comes from the screen object your browser exposes. Because the browser counts in CSS pixels, a laptop with a sharp panel often shows a smaller number than the one on the box.

CSS Pixels And Native Pixels

Two pixel counts live in every modern display. The CSS pixel is the unit your stylesheet talks in, while the native pixel is a real dot in the panel.

So the tool multiplies the CSS size by the device pixel ratio, and then it prints the native size underneath. For example, a 1512 by 982 screen at a ratio of two really holds 3024 by 1964 dots. The MDN page on window.devicePixelRatio sets out the rule browsers follow.

The Available Screen Area

Your screen is not all yours. Because a taskbar, a dock or a menu bar keeps a strip, the browser also reports an available width and height.

The tool shows both pairs, so the difference tells you how much furniture your desktop holds back. On a phone the two pairs usually match, while on a desktop they rarely do.

Colour Depth And Orientation

Two smaller readings sit in the same panel. Colour depth counts the bits per pixel, and almost every display today answers twenty-four.

Orientation says whether you sit in portrait or landscape, and it also gives the angle. Therefore a tablet that you turn updates both lines at once, as the MDN page on screen.orientation describes.

A Viewport Size Checker In The Same Page

The viewport is the part of the window your page can actually draw in. So the second panel measures it directly, and then it holds that figure against the screen size above.

Two readings appear here. The window gives one width, while the document element gives another, and any gap between them is the scrollbar.

Sometimes that gap is zero. Because a browser with overlay scrollbars floats the bar above the page instead of reserving room for it, the panel then reports nought pixels, and the screenshot below shows exactly that case.

Why The Viewport Is Smaller Than The Screen

Browser furniture eats the rest. Because the tab strip, the address bar and the bookmarks row all sit above your page, the viewport loses a hundred pixels of height or more.

Width goes the same way once a scrollbar appears. So a maximised window on a 1920 wide screen often reports 1905 for the document, and that missing 15 is the bar itself. The rules behind both readings live in the W3C CSSOM View Module.

Which Breakpoint You Are In

Most sites change layout at a few set widths. So the tool names the band you sit in right now, from a narrow phone through a tablet to a wide desktop.

Resize the window and the label follows you. Therefore you can watch exactly where a design flips, without opening a single developer tool.

The Visual Viewport On A Phone

A phone adds one more layer. When the keyboard opens or you pinch to zoom, the part you can see shrinks even though the layout keeps its size.

The tool reports that visible box and the zoom scale beside it. For the details, see the MDN page on the VisualViewport API.

Aspect Ratio And Pixel Density

The third panel turns your two sizes into shapes. First it reduces the screen size to a ratio, and then it works out how tightly the pixels sit together.

Both figures help when you choose an image or a video. For instance, a 16:9 banner fits a 1920 by 1080 screen exactly, while a 16:10 laptop leaves a band.

How The Tool Reduces The Aspect Ratio

A ratio is just a fraction in lowest terms. So the tool divides both sides by their greatest common divisor, and 1920 by 1080 becomes 16:9.

Some sizes never land on a neat pair. For example, 1366 by 768 reduces to 683:384, so the tool also names the closest common ratio beside it.

PPI Needs Your Monitor Diagonal

Pixels per inch cannot come from the browser. Because no web page may ask a panel how large it stands in inches, the figure stays blank until you type the diagonal yourself.

Enter 27 for a 27 inch monitor, and the tool does the rest. Then it divides the native diagonal in pixels by your measurement, so a 3840 by 2160 panel at 27 inches lands near 163 PPI.

Refresh Rate And Display Capability

The fourth panel asks what your display can do. So it samples the refresh rate, and then it checks the colour and contrast features your browser admits to.

Every line here holds a browser answer, not a hardware lookup. Therefore the panel stays honest about that difference.

The Refresh Rate Is An Estimate

No browser hands out the refresh rate directly. Instead the tool counts animation frames for about a second, and then it rounds the count to the nearest common rate.

So treat the answer as close rather than exact. Because a busy tab or a battery saver drops frames, a 120 Hz panel sometimes reports 60 while it throttles. The frame callback behind the count sits on the MDN requestAnimationFrame page.

Colour Gamut And Dynamic Range

Two media queries answer the colour question. One asks whether your display covers the wider P3 space, while the other asks whether it handles high dynamic range.

A yes here means your browser claims the capability. So treat it as a hint for a CSS decision, as the MDN colour-gamut reference suggests, rather than as a calibration report.

Contrast, Motion And Pointer Hints

The same panel reads the preferences you keep in your system. Dark mode, reduced motion, higher contrast and forced colours each get a line.

Pointer and hover round it off, so a touch screen and a mouse look different straight away. All of these queries sit in the W3C Media Queries Level 5 specification.

What This Screen Resolution Checker Cannot Tell You

An honest tool names its limits. So here are the lines this page will never print, however often you refresh it.

Your monitor model stays unknown, and so does the make of your graphics card. Physical inches need your own measurement, while the refresh rate remains a sample rather than a reading from the panel.

Copy The Whole Report

One button takes everything. So press Copy report, and every panel lands on your clipboard as a plain list of labels and values.

That list pastes straight into a bug ticket. Therefore a tester can say exactly which screen, viewport and ratio produced a layout problem.

Safe By Design

The tool works in your browser. It sends nothing, and it stores nothing. So the sizes it reads, the diagonal you type and the report you copy all stay on your own device.