Question 1

Why is the resolution lower than my monitor’s?

Accepted Answer

The big number is the physical resolution, worked out from the size the browser reports in CSS pixels times the scaling. Display scaling on Windows, such as 125% or 150%, and the high-density screens on Macs and phones make each CSS pixel cover more than one real pixel, so a 1920 × 1080 laptop at 125% reports 1536 × 864 CSS pixels. If the big number is still lower than your monitor’s, the operating system is set to a lower resolution than the screen supports.

Question 2

Does browser zoom change the numbers?

Accepted Answer

Zooming changes the CSS pixel size and the scaling shown, because the browser treats zoom as extra scaling. The physical resolution at the top usually stays the same, though it can be off by a pixel or two. Reset the zoom to 100% with Ctrl+0, or Cmd+0 on a Mac, before you read the CSS values.

Question 3

What’s the difference between the screen and the viewport?

Accepted Answer

The screen resolution is the whole display. The viewport is the part of the browser window that shows the page, without the tabs, address bar and toolbars, so it’s smaller unless the browser is in full screen. The viewport is the space a web page actually gets.

Question 4

What does colour depth mean?

Accepted Answer

It’s the number of bits used to describe each pixel’s colour. 24-bit is the norm: 8 bits each for red, green and blue, which gives about 16.7 million colours. Some wide-colour and HDR setups report 30-bit.

Question 5

Can it tell me my screen size in inches?

Accepted Answer

No. Resolution counts pixels, not size. A 24 inch and a 27 inch monitor can both be 1920 × 1080; the larger one just has bigger pixels. Browsers aren’t told how big the screen is, so check the model on the box or the manufacturer’s site.

Row	What it tells you
Aspect ratio	The shape of the screen, worked out from the physical pixels, with the nearest common ratio such as 16:9 when it’s close
Browser window (viewport)	The space the page gets right now; changes as you resize the window
Available screen	The screen minus the taskbar or dock
Wide colour (P3) and HDR	Whether the browser reports a screen that can show more colours or brighter highlights than a standard one
Touch screen	Whether touch is available, and how many fingers at once
Dark mode, language, time zone	Settings your browser shares with every site, useful when testing a website
User agent	The text your browser sends to identify itself and its version

What is my screen resolution?

How to check your screen resolution

CSS pixels, physical pixels and device pixel ratio

What the other rows mean