Device pixel ratio
Device pixel ratio (DPR) is how many of a display's physical pixels span one CSS pixel, the unit a page is laid out in. A ratio of one means the two match; a ratio of two means a high-density display draws each CSS pixel as a two-by-two block of hardware pixels, so a screenshot from that display is twice the width and height of the viewport it shows.
The longer version
A web page is laid out in CSS pixels, an abstract unit the browser scales so that a width of three hundred CSS pixels looks about the same apparent size at the distance a screen is normally viewed from. The screen itself has a fixed grid of hardware pixels. The ratio between them is the device pixel ratio, which the browser exposes to scripts and which also changes when the user zooms the page or sets a display scale in the operating system. A layout that fits a viewport of a given CSS width fits it at any ratio; what changes is how much detail each pixel can hold.
The confusion is between viewport size, screen size and resolution. Two phones can report the same CSS viewport width and have physical resolutions that differ by a factor of two or three. A screenshot taken from the high-density one is correspondingly larger in pixels, so a tester comparing it to the viewport numbers in a report concludes they cannot both be right. They are: the screenshot is in hardware pixels, the viewport is in CSS pixels, and the ratio links them. Screen resolution, the raw hardware grid, is a third number that only matches the viewport width at a ratio of one with the browser filling the screen.
The bugs the ratio produces are visual. An image served at its CSS size looks crisp at a ratio of one and blurred at two, because the browser is stretching it. A one-pixel border rendered at a fractional ratio becomes uneven. Icons in a sprite sheet misalign. Canvas drawings come out fuzzy unless scaled by the ratio. These reproduce on the tester's high-density laptop and not on the developer's external monitor, or the reverse, so reports of blurry assets argue until someone asks what the ratio was on each side.
Common questions
What is the difference between device pixel ratio and screen resolution?
Screen resolution is the physical grid of hardware pixels a display has. Device pixel ratio is how many of those pixels the browser uses for each CSS pixel of the page. Dividing the resolution by the ratio gives the screen's size in CSS pixels, the most a viewport on that device can be, and the viewport is the number a layout bug depends on.
Why is my screenshot bigger than the viewport size?
The screenshot is captured in hardware pixels and the viewport is measured in CSS pixels. On a display with a device pixel ratio of two, a viewport that is a given number of CSS pixels wide produces a screenshot twice as wide in image pixels. Both numbers are correct; the ratio converts between them.
Does device pixel ratio affect responsive layout?
Responsive breakpoints are defined in CSS pixels, so the ratio does not change which layout a viewport gets. It changes how sharply that layout renders: images without high-density variants blur, thin borders become uneven, and canvas content goes fuzzy. Testing on one high-density and one standard-density device catches most of those.
How do you find the device pixel ratio of a device?
Type window.devicePixelRatio into the browser console on the device, or read it from the device toolbar in developer tools. Dividing the display's physical width in hardware pixels by the width the browser reports for the screen gives the same value. A bug report that records both the viewport and the screen lets the developer work it out without asking.
Does browser zoom change the device pixel ratio?
Zooming in raises the device pixel ratio the page reports, because each CSS pixel now covers more hardware pixels, and it shrinks the CSS viewport at the same time, so a responsive layout can switch to its narrow breakpoint. A tester who zoomed to read the text files a report with a viewport that no other device produces, and the layout bug reproduces nowhere else.
Bug reports that arrive ready to triage.
Collect replay, console, network and browser context with the Free plan.