What Is My Screen Resolution?

CSS pixels, physical pixels, and why they differ

The number above is your screen size in CSS pixels, which is what web pages, your operating system's display settings and almost every “what is my resolution” answer mean by resolution. It is not always the number of pixels in the panel. Modern displays pack far more pixels into the same physical area than older ones, and if websites and applications were drawn one pixel to one pixel, everything on a Retina laptop or a modern phone would be unreadably small. So the system defines a logical pixel and draws it using several real ones.

How many is the device pixel ratio. A ratio of 1 means one CSS pixel is one physical pixel — a standard 1080p monitor. A ratio of 2 means each CSS pixel is a 2 × 2 block of real pixels, which is why a 13-inch MacBook reports something like 1512 × 982 while the panel is really 3024 × 1964. Fractional ratios such as 1.25, 1.5 and 2.625 come from Windows display scaling and from phones, where the manufacturer picked a scale that is not a whole number. The physical figure shown above is that multiplication, and it is calculated rather than read: on a display running below its native resolution it will report what the system is currently drawing, not what the panel is capable of.

Screen resolution vs window size

Two different numbers, and mixing them up is the usual reason a reading looks wrong. Screen resolution describes your monitor and does not change when you resize a window. Viewport size is the area inside the browser window that a page can draw in — the window minus its toolbars, and minus a scrollbar if one is showing. Resize this window and you will see the viewport figure above change while the resolution stays put. If you are testing how a site behaves on a smaller screen, the viewport is the number that matters, and it is what a responsive design's breakpoints react to.

Available screen area sits between the two: the full screen minus whatever the operating system permanently reserves, such as a Windows taskbar or the macOS menu bar and dock. It is what a maximised window gets.

Colour depth

Colour depth is how many bits the display uses to describe one pixel, across all channels. 24-bit is the long-standing standard — 8 bits each of red, green and blue, giving about 16.7 million colours. 30-bit means 10 bits per channel, which is what HDR and wide-gamut displays use and what allows smooth gradients without visible banding. Browsers report this figure inconsistently on some platforms, so treat a surprising number as the browser's opinion rather than the panel's specification. If you want to see the difference in practice rather than in a number, the colour and gradient test puts full-screen ramps on the panel, where banding shows up immediately.

Changing your resolution

If the figure above is not what you expected, your display is probably not set to its native resolution — and an LCD or OLED panel has exactly one, the resolution its pixels physically are. Anything else has to be interpolated, which is why a mis-set screen looks soft. On Windows: Settings → System → Display, and pick the mode marked “(Recommended)”. On macOS: System Settings → Displays, where “Default for display” is the native option. On Android and iOS the resolution is fixed, though display zoom settings change how large everything is drawn, which changes the numbers a web page sees.

Checking a new or second-hand screen? Run the dead pixel test for individual failed pixels and the refresh rate test to confirm a high-refresh panel is not still sitting at 60Hz. Everything on this page is read locally in your browser and nothing is uploaded.