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/
Written by Marcus Zanona
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#