Blog
Select Page

Retina Display Media Query

Misc

For including high-res graphics, but only for screens that can make use of them. “Retina” being “2x”:

Retina Display Media Query
Difference between normal display and retina display

CSS – Media Query

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific stuff here */

}

More info – https://css-tricks.com/snippets/css/retina-display-media-query/