Retina and High-DPI Display Detection

Detecting Retina / High-DPI Displays

The resolution (and legacy -webkit-min-device-pixel-ratio) media feature detects displays with high pixel density, commonly called "Retina" displays.

The Query

@media (min-resolution: 2dppx) {
  /* High-DPI styles */
}

Legacy Syntax

For older WebKit browsers, you may need the prefixed version:

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  /* High-DPI styles */
}

What to Adjust for High-DPI

1. Images -- Serve 2x resolution images to avoid blurriness:

.logo { background-image: url('logo.png'); }

@media (min-resolution: 2dppx) {
  .logo { background-image: url('logo@2x.png'); background-size: contain; }
}

2. Borders -- Thin borders (1px) can appear too thick on Retina displays. Use 0.5px or a transform trick:

@media (min-resolution: 2dppx) {
  .thin-border {
    border-width: 0.5px;
  }
}

3. Icons -- Use SVG instead of raster icons when possible, as SVG renders crisply at any resolution.

Modern Alternative: srcset

For <img> elements, the srcset attribute is often a better approach than media queries because the browser can pick the optimal image:

<img src="photo.jpg" srcset="photo@2x.jpg 2x, photo@3x.jpg 3x" alt="Photo">