Device Pixel Ratio (DPR) and Retina Display Guide

Understanding Device Pixel Ratio

Device Pixel Ratio (DPR) is the ratio between physical hardware pixels and CSS logical pixels. It determines how many physical pixels render each CSS pixel, directly affecting image sharpness and rendering quality.

Common DPR Values

DPR	Description	Examples
1x	Standard displays	Desktop monitors, Chromebooks
1.25x	Windows laptops (125% scaling)	ThinkPad, budget laptops
1.5x	Windows laptops (150% scaling)	Dell XPS, Surface
2x	Retina displays	MacBook, iPad, iPhone SE/XR
2.625x	Android phones	Google Pixel 7/8, Galaxy A
3x	High-DPI phones	iPhone 12+, Samsung Galaxy S
3.5x	Ultra-high-DPI phones	OnePlus flagships

CSS Pixel vs Physical Pixel

A CSS pixel is an abstract unit. On a 2x DPR display:

• 1 CSS pixel = 2x2 = 4 physical pixels
• 100 CSS pixels = 200 physical pixels across

On a 3x DPR display:

• 1 CSS pixel = 3x3 = 9 physical pixels
• 100 CSS pixels = 300 physical pixels across

Responsive Images with srcset

<img
  src="photo-400.jpg"
  srcset="photo-400.jpg 1x,
          photo-800.jpg 2x,
          photo-1200.jpg 3x"
  alt="Example photo"
  width="400"
  height="300"
/>

Detecting DPR in CSS and JavaScript

/* CSS: target high-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero { background-image: url(hero@2x.jpg); }
}

// JavaScript
const dpr = window.devicePixelRatio || 1;
console.log(`DPR: ${dpr}`);

Canvas Rendering

For HTML5 Canvas, always multiply the canvas dimensions by the DPR for crisp rendering:

const dpr = window.devicePixelRatio || 1;
canvas.width = displayWidth * dpr;
canvas.height = displayHeight * dpr;
ctx.scale(dpr, dpr);