css pixels and device pixel ratio
screen.width and screen.height describe the whole screen in CSS pixels, window.innerWidth measures only the viewport visible inside the browser, and devicePixelRatio (DPR) counts how many physical pixels the display uses to draw a single CSS pixel. This calculator lays the three numbers side by side to end the confusion between them.
DPR 1 is the default on older external monitors and on most office displays: every CSS pixel in the layout corresponds to exactly one physical pixel on the panel, with no rescaling by the browser.
Multiplying the viewport width by the DPR gives the count of physical pixels the panel actually lights up to draw that viewport, useful for knowing which image resolution to export without wasting bandwidth.
Flagship phone screens commonly run DPR 3, so a `srcset` image with a `3x` descriptor needs three times the element width in pixels or it will blur under pinch zoom.
The viewport is the visible area of the page in the browser, measured in CSS pixels. It changes when resizing the window, opening sidebars, changing zoom or rotating the device.
Yes: increasing page zoom raises the DPR the browser reports by the same proportion, because zoom redraws the content with more physical pixels per CSS pixel; that is why devicePixelRatio should be read again on every resize event, never cached at page load.
Because those descriptors tell the browser which image to pick based on the device DPR without CSS having to change: on a DPR 2 screen, the browser downloads the version marked `2x`, which has double the physical pixels of the base version, keeping the result sharp without resizing the image at runtime.
They can, when the browser window is maximized with no operating system side panel visible, but window.innerWidth is normally smaller, since it subtracts the scrollbar area and the browser own chrome; never assume the two values match in production.
It applies conditional CSS to high-density screens without depending on runtime JavaScript: the `min-resolution` media query compares the device DPR directly against the given threshold, letting you swap a background-image for a higher-resolution version only when the panel actually has enough physical pixels to make use of it.
Measurements are read locally through browser APIs and do not uniquely identify your screen.