Question

I was searching for a method to set different stylesheets depending whether users device is non – retina or retina. I came across tons of different methods, so now I don’t know which one to do. Although in my opinion this seems to be easier and more efficient one:

<link rel="stylesheet" href="myCss.css" media="screen and min-device-pixel-ratio: 2">

But I’m not sure it it is the latest syntax, will this work for all modern browsers (including ie9), is there a way to improve this method?

Answer 1

Your approach with the media attribute in the link tag is a good start. Although I would recommend using the new media query which you can use directly inside the .css.

http://www.w3.org/TR/css3-mediaqueries/

You can do that as so:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2){
    /* The retina stuff here */
    }

Futher reading: http://menacingcloud.com/?c=highPixelDensityDisplays