CODEWITHSUNDEEP
htmlcssstylesheetmedia-queriesretina-display
Ilja
Ilja

Reputation: 46479

Setting specific stylesheet for retina displays

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?

Upvotes: 2

Views: 1151

Answers (2)

Jelmer
Jelmer

Reputation: 2693

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

Upvotes: 0

Alfo
Alfo

Reputation: 4819

In your existing stylesheet

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

From

CSS-Tricks

Upvotes: 2

Related Questions