Screen Resolution, Viewport and Device Pixel Ratio Explained

Ask a browser how big your screen is and you might get an answer that looks wrong. A 4K monitor reports 1920 pixels across, and a phone with a 1179-pixel-wide panel reports 393. Neither is a mistake. Browsers measure in CSS pixels, and knowing how those relate to physical pixels explains almost every surprising number.

CSS pixels and physical pixels

A CSS pixel is the unit web pages use for layout. On a classic desktop display, one CSS pixel is one physical pixel. High-density displays pack more physical pixels into the same space, so the browser draws each CSS pixel with several physical ones. Text and images get sharper, and the layout stays the same size.

The ratio between the two is window.devicePixelRatio. MDN describes it as the ratio of the resolution in physical pixels to the resolution in CSS pixels, with 1 meaning a classic 96-DPI display and 2 expected for HiDPI or "Retina" displays. Phones commonly report 3.

The sizes a page can read

• screen.width and screen.height give the whole display, in CSS pixels.
• screen.availWidth and availHeight give the display minus permanent system UI, such as the taskbar or dock.
• window.outerWidth and outerHeight give the browser window, including its toolbars.
• window.innerWidth and innerHeight give the viewport, the area showing the page, including the scrollbar.
• window.visualViewport gives the part visible right now, which shrinks when you pinch-zoom or an on-screen keyboard opens.

Responsive layouts use the viewport. CSS media queries such as (max-width: 600px) test the viewport width, not the screen.

Display scaling and zoom

Operating-system scaling changes the CSS-pixel numbers for the whole screen. A 2560-pixel-wide monitor at 150% scaling has a device pixel ratio of 1.5, and reports a screen width of about 1707 CSS pixels.

Browser zoom does the same thing for one site. MDN notes that page zoom increases the size of a CSS pixel, so devicePixelRatio rises and the viewport, measured in CSS pixels, shrinks. Pinch-zoom is different: it magnifies the page without changing CSS pixels, so it changes the visual viewport instead.

Why developers care

• Sharp graphics: a <canvas> sized 200 × 200 CSS pixels needs 400 × 400 actual pixels on a ratio-2 screen, or it looks blurry. MDN's canvas example multiplies the drawing buffer by devicePixelRatio for exactly this reason.
• Responsive images: srcset lets the browser pick a higher-resolution image on denser screens.
• Layout bugs: a design that works at 100% zoom can break at 125%, because the viewport is 20% narrower in CSS pixels.

Why privacy researchers care

Screen and window sizes are classic fingerprinting signals. Common laptop resolutions are shared by millions of people. An unusual combination of screen size, window size, scaling and zoom can be rare, and the window size changes every time you resize it. Tor Browser rounds the window to standard sizes ("letterboxing") so that its users look alike. Firefox's fingerprinting protection adjusts the available-screen values when it is active.

See your own numbers

The screen resolution test shows every one of these values side by side, updates them live as you resize or zoom, and estimates the physical resolution from the device pixel ratio.