Last Updated: February 25, 2016
·
2.159K
· zanona

Targeting Retina Devices through CSS

For targeting retina devices using CSS it's possible to make use of a media query with the attribute -webkit-min-device-pixel-ratio.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     /*your custom declarations here*/
 }

Sidenote: bear in mind that the example used is just a media query based on the guidelines of iOS and Retina MacBook Pro’s. Android actually uses different values min-device-pixel-ratio, depending on the screen that’s on your device.

Source: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/