Last Updated: February 25, 2016
· 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.