What Is My Screen Resolution?

What is my screen resolution?

The panel above shows what your browser reports for your screen, along with five other rectangles it keeps track of. If you only want the headline number, it is the first one. If you want to know whether that number is your real hardware resolution, the honest answer is that your browser is not required to tell you — and this page shows you exactly where that uncertainty comes from rather than papering over it.

A screen resolution is a count of pixels: 1920 across by 1080 down is the most common desktop display in the world. The complication is that browsers do not measure in hardware pixels. They measure in CSS pixels, a unit deliberately decoupled from the panel so that a page is roughly the same physical size on a phone, a laptop and a television. On a display running at 200% scaling, one CSS pixel covers two hardware pixels in each direction, and the browser reports half the numbers a spec sheet would.

That is why a 3840-wide 4K laptop very often reports 1920. It is not a bug and nothing is broken — it is the unit doing its job.

How to read the results

1. Start with the big number. That is screen.width by screen.height, in CSS pixels. For most people on a display at 100% scaling it is the hardware resolution and nothing more needs doing.
2. Compare the six rectangles. Each one is a different measurement and the gaps between them are meaningful: browser chrome, the scrollbar, the taskbar, pinch-zoom. Resize the window and watch which rows move.
3. Read the estimate and its caveat. Multiplying by the device pixel ratio gives a guess at your hardware pixels, and the list underneath shows every scaling-and-zoom combination that would produce the same ratio.

Six rectangles, and every tool conflates some of them

The CSSOM View specification defines each of these separately, and they are genuinely different things. screen.width is the whole display. screen.availWidth is the display minus whatever the operating system reserves — the Windows taskbar, the macOS menu bar and dock. outerWidth is your browser window including its own toolbars. innerWidth is the viewport, the area a page can actually draw in, and it includes the scrollbar. document.documentElement.clientWidth is the same viewport with the scrollbar excluded, so the difference between those two rows is literally the width of your scrollbar. And visualViewport is the part you can see right now, which is what changes when you pinch-zoom on a phone or an on-screen keyboard slides up.

Most of the confusion in bug reports comes from two of these being compared as though they were one. A layout that breaks “at 1280” may break at a 1280 window, a 1280 viewport, or a 1280 screen with a narrower window inside it, and those are three different tests.

Watching them move is the quickest way to internalise it. Make this window narrower and the last four rows change while the first two do not; open the developer tools in a docked panel and the viewport rows shrink while the window rows stay put.

Why the browser cannot tell you your hardware resolution

There are two separate reasons, and both are written into the specification rather than being quirks of any particular browser.

The first is that the browser is permitted to make the number up. The CSSOM View Module defines screen.width as the width of the “Web-exposed screen area”, and defines that area as “one of the following: the area of the output device, in CSS pixels; the area of the viewport, in CSS pixels”. A browser that hands you the size of its own window instead of the size of your monitor is fully conformant. This is deliberate: section 15 of the same document states that the Screen interface “may be used as input to fingerprinting algorithms” and that user agents “may choose to hide or quantize information about the screen size or configuration” to protect the user. Privacy-hardened browsers and browsing modes do exactly this. It is worth noting that MDN describes the property as simply “the width of the screen in CSS pixels”, which is the specification's first option presented as though it were the only one.

The second reason defeats the obvious workaround. Multiplying the CSS size by devicePixelRatio looks like it should recover hardware pixels, and the specification's own definition rules it out: the ratio is the size of a CSS pixel “at the current page zoom” divided by the size of a device pixel. Page zoom is folded into the same number as display scaling. A ratio of 2 means a high-density display at 100% zoom, or an ordinary display at 200% zoom, and no JavaScript can tell you which — try pressing Ctrl and plus a few times and watch the estimate above change while your monitor does not.

One small detail from that same sentence, since almost nothing mentions it: the ratio is defined using the vertical size of a device pixel specifically. On a hypothetical display with non-square pixels, the horizontal figure would not be the one you were given.

Names, and the ones that are wrong

The aspect ratio above is reduced exactly, which is more revealing than it sounds. 1366×768, the most common laptop panel for the best part of a decade, is routinely called 16:9 and is not: reduced, it is 683:384, because 16:9 of 768 works out at 1365.33 and you cannot have a third of a pixel. It is only 0.05% off, so nobody notices, but it is not the same shape.

The ultrawide monitors sold as 21:9 are further out and are not even consistent with each other. 2560×1080 is 64:27 and 3440×1440 is 43:18 — 1.6% and 2.4% from 21:9 respectively, and different shapes from one another despite sharing a marketing label. Similarly, 1280×1024 is exactly 5:4 rather than the 4:3 its era suggests, which is why old photographs stretched on those monitors.

“4K” names two different things. 3840×2160, the one in televisions and monitors, is exactly 16:9 and is properly called UHD. 4096×2160, the cinema standard, is 256:135 — a genuinely different shape, 6.7% from 16:9. The tool names both correctly rather than treating 4K as a single resolution. And while the name suggests four thousand of something, what is actually true is more useful: UHD holds exactly four times as many pixels as Full HD.

Why is it free?

Everything here is measured by your own browser and displayed on the spot. No measurement is sent anywhere, nothing is logged, and there is no account to make — the page costs us nothing per visitor beyond a few kilobytes of JavaScript.

No sign-up, no limits, and no watermark on anything you copy out.