Three different numbers
Screen resolution is the panel’s size in physical pixels. Viewport size is the area the page can actually use, which is smaller by whatever the browser chrome, scrollbars and any docked panels occupy. Available size excludes the taskbar or dock.
For designing or debugging a layout, viewport size is the one that matters — it is what a CSS media query responds to.
Why a 4K screen reports 1920 wide
Because of the device pixel ratio. A high-density display packs more physical pixels into the same space and reports a smaller logical size, so text stays legible rather than becoming tiny. A ratio of 2 means each CSS pixel is drawn with four physical ones.
Which is why images need to be supplied at roughly twice the logical size to look sharp on such a screen — and why a screenshot from a Retina display comes out at double the dimensions you expected.
Frequently asked questions
Why does my 4K screen report 1920 wide?
Device pixel ratio. A high-density display reports a smaller logical size so text stays readable; a ratio of 2 means four physical pixels per CSS pixel.
Which number should I design against?
The viewport size — that is what CSS media queries respond to, and it is smaller than the screen by whatever the browser occupies.
Why do my images look soft on this screen?
They need to be roughly twice the logical size on a high-density display, otherwise the browser is scaling them up.
Something wrong with this tool, or an idea for it? Tell us