fixmint

What is my screen resolution, and why the number looks wrong

By · · 4 min read

Your screen resolution is the number of physical pixels across and down the display, written as width × height, such as 1920 × 1080. Your system's display settings show it. A web page, though, usually reports a different figure, because browsers measure in CSS pixels, a unit that the operating system and the browser scale. Both numbers can be right at the same time. The screen resolution check shows the screen size, the scaled size and the window size together, so you can see which one you are looking at.

Screen resolutionWhat is my screen size?Open

Physical pixels and CSS pixels

A physical pixel is one of the small light points on the panel. A CSS pixel is a unit that web pages use for layout. A page that is 800 CSS pixels wide should fill about the same share of the window on any panel, so the browser converts between the two units using the device pixel ratio.

The device pixel ratio is the number of physical pixels that make up one CSS pixel. On an ordinary monitor it is 1. On many high-density screens it is 2 or more, and each CSS pixel is drawn with a 2 by 2 block of physical pixels, which is why text looks sharper. The screen size a page reads in CSS pixels is the physical size divided by that ratio.

Operating system scaling

Most of the time the ratio comes from the operating system's display scaling. On Windows, this is the Scale setting in the display settings. On macOS, the resolution options for a display control how much space the interface gets. A 4K panel has 3840 × 2160 physical pixels. Set to 200 percent scaling, it gives the interface the space of 1920 × 1080, and a browser on that screen reports 1920 × 1080 CSS pixels with a ratio of 2.

The arithmetic is simple: divide the physical size by the scale factor.

Panel, physical pixelsScalingScreen size in CSS pixelsRatio
3840 × 2160100 percent3840 × 21601
3840 × 2160150 percent2560 × 14401.5
3840 × 2160200 percent1920 × 10802
1920 × 1080100 percent1920 × 10801

Some scale values do not divide evenly, and the browser rounds the result. A figure that is off by one pixel from your own sum is normal.

Browser zoom changes the number

Zoom in the browser is a separate setting from display scaling. Zooming to 200 percent doubles the size of everything on the page. The browser changes the device pixel ratio to match, so the window's width in CSS pixels halves while the physical screen stays the same. A window that measured 1280 CSS pixels wide at 100 percent can report 640 after zooming in.

Zoom is the most common reason two checks give different numbers. If a figure looks wrong, check the zoom level first, then press Ctrl+0, or Cmd+0 on a Mac, to return to 100 percent.

Screen, available screen and window

Three sizes are easy to confuse.

  • The screen is the whole display, as the operating system reports it.
  • The available screen leaves out areas the system keeps for itself, such as the taskbar on Windows or the dock and menu bar on a Mac. It is never larger than the screen.
  • The browser window, also called the viewport, is the area where the page is drawn. It excludes the tabs, the address bar and the bookmarks bar, and it changes every time you resize the window.

When a site asks for your screen size, it usually means the screen or the window. Check which one it needs before you copy a number.

Refresh rate, HDR and color

The refresh rate is how many times a second the display updates the picture. A browser cannot read it directly. A page can only count the animation frames it draws in about one second. The result is therefore a measurement, and it can come out lower than the screen's rate when the tab is in the background, the computer is busy or battery saver mode limits drawing. Treat it as approximate.

HDR and color gamut are also reported through media queries, which describe what the browser detects. That can differ from the display's full capability, and from whatever the system has switched on. Use these readings as a guide.

Finding the number in your system

To check the figure the system itself uses, open the display settings. On Windows 11, go to Settings, then System, then Display, and look at Display resolution. On macOS, open System Settings and choose Displays. Both show the scaled resolution and the options available.

Once you know the size, a solid-colour check is the next step for a new screen. The dead pixel test fills the display with black, white, red, green and blue, so you can look for stuck or dead points.

Quick answers

Why does my monitor report a smaller resolution than it has?

Scaling is probably set above 100 percent. The physical resolution is unchanged, and the page reads the scaled size in CSS pixels.

Does browser zoom change my screen resolution?

No. It changes the page's pixel ratio and the window size in CSS pixels. Reset the zoom to get back to the normal figure.

Is the refresh rate exact?

No. It is measured from animation frames over about one second. A background tab or a busy computer can lower the figure.

Cover of HARDWARE THEORYHARDWARE THEORY

Twenty years of computing hardware explained: cores, clocks, memory and storage, and why your devices behave the way they do.

$4.99 Get it on Gumroad →