The number of a screen's tiny physical dots packed into each layout pixel a designer works with. On high-resolution 'retina' screens this ratio is 2 or 3, so images need extra detail to stay sharp.
Synonyms
- dpr
- pixel density ratio
Related terms
- responsive images
- viewport
- relative units
In plain words
- why images can look blurry on newer high-resolution phone screens
Usage example
The logo looked fuzzy on the new phone because its device pixel ratio is 3, so we shipped a higher-resolution version.
Don't confuse with…
- resolutionScreen resolution is the total dot count; device pixel ratio is how many of those dots map to one CSS pixel.
Categories
- Responsive & adaptive design