Screen Resolution, DPR and Retina Displays Explained

When your browser reports a screen of, say, 1512×982, those are CSS pixels — the abstract coordinate grid the web is drawn on. The physical panel may contain far more dots than that. A CSS pixel is a unit of layout, deliberately kept at a roughly consistent apparent size so text is legible whether you are on a phone or a desktop monitor. Physical pixels are the actual light-emitting elements in the hardware.

The bridge between the two is the device pixel ratio. On an old display the ratio is 1: one CSS pixel maps to one physical pixel. On a modern high-density screen the ratio is 2 or 3, so each CSS pixel is painted using a 2×2 or 3×3 block of physical pixels.

A DPR of 2 means the hardware has four times as many physical pixels as the CSS grid suggests, packed into the same physical space. That extra density is what makes text and icons look crisp — the display has more dots to render each shape. It is also why images need to be supplied at higher resolution (the familiar @2x assets): a picture authored for a DPR-1 screen looks soft when stretched across a DPR-2 panel.

"Retina" is simply Apple's brand name for a display whose DPR is high enough that, at a normal viewing distance, you cannot pick out individual pixels. There is no magic in the term — it is a DPR of 2 or 3, exactly the value your browser exposes as devicePixelRatio and that DeviceScope shows on the Screen & Display panel.

Device pixel ratio is not a fixed property of your monitor — it is the ratio in effect right now, and browser zoom moves it. Press Cmd or Ctrl with plus on a DPR-1 display and the reported ratio climbs to 1.1, then 1.25, then 1.5; zoom out on a Retina laptop and it drops below 2. Operating-system display scaling does the same thing from the other side: Windows set to 125% or 150% hands the browser a ratio of 1.25 or 1.5 before you touch zoom at all. Drag a window between two monitors of different densities and the value changes under you mid-session.

This is why a reading like 1.7647058823529411 is perfectly normal rather than a fault: it is a zoom step multiplied by a scaling factor, and the arithmetic rarely lands on a round number. A fractional ratio has visible consequences too, because the browser has to resample — one-pixel borders and small text can look slightly uneven next to a whole-number ratio. It is also a surprisingly strong fingerprinting signal, since a non-default zoom level is unusual and travels with you from site to site. If you want your screen numbers to read the same on every visit, reset zoom to 100% first.

Screen size, window size and visible area are three separate measurements, and it is worth knowing which one you are reading. screen.width and screen.height describe the whole display in CSS pixels, regardless of what your browser occupies. window.innerWidth and innerHeight describe the browser's viewport and include the space taken by a classic scrollbar, while document.documentElement.clientWidth is the version that excludes it — which is why the two can differ by around fifteen pixels on a desktop. The visualViewport object describes something different again: the portion actually on screen after a pinch-zoom, or once an on-screen keyboard has pushed the page up.

On phones the distinction stops being academic. The URL bar collapses as you scroll, so innerHeight genuinely changes mid-gesture — the long-standing reason a 100vh layout overflows on mobile, and why CSS gained the svh, lvh and dvh units for the small, large and dynamic viewport heights. Notches and home indicators carve out further space that you keep clear with the env(safe-area-inset-*) values. Watching the window figure move as you rotate a phone, or as you drag a desktop window between displays, is the quickest way to learn which measurement is which.

Do not confuse the screen size with the window size. The screen figure describes the whole display; the window (or viewport) figure describes just the area your browser occupies, which shrinks when you resize or split the screen. DeviceScope shows both and updates the window value live as you drag the edge. Colour depth, usually 24 or 30 bits, tells you how many colours the pipeline can represent.

Refresh rate — 60Hz, 120Hz and so on — is the one figure a browser cannot report directly, so tools estimate it by counting animation frames over a short window. Treat it as a close approximation: background tabs, power-saving modes and variable-refresh displays can all nudge the number.