CODEWITHSUNDEEP
cssmedia-queries
Chapsterj
Chapsterj

Reputation: 6625

(-webkit-min-device-pixel-ratio: 1.5)

I have a style sheet that has some css3 media queries in it. 

@media (max-width: 480px), (-webkit-min-device-pixel-ratio: 1.5) {
    p, label, .labelish {font-size: 1.2em;}
    h3 {font-size: 1.4em;}
        body{
         background-color: red !important;
        }
}

Now I understand the first part which is only apply these styles if the users browsers is below 480px. The -webkit-min-device-pixel-ratio: 1.5 is what I'm not getting. I understand it's looking for high density screen pixel resolution. But not sure why it's kicking in on the new Mac retina screens on Chrome. The reason I ask is I have 2 computers one with the new retina screen and the other without and the above css is kicking in only on the retina screen.

I found this link http://bjango.com/articles/min-device-pixel-ratio/ which lists out the screens it should effect

According to this list Mac retina screens should not be applying these styles.

Can someone explain why this is occurring.

Upvotes: 0

Views: 5495

Answers (1)

Aprillion
Aprillion

Reputation: 22322

if this property works like the rest of CSS, then -webkit-min-device-pixel-ratio: 1.5; should be applied to devices with this ratio reported as 2 - in the same way that max-width: 480px; will be appliet do devices with width of 320px

also comma (,) is an OR operator when it comes to CSS selectors / lists, use AND instead if that was your intention:

@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5)

Upvotes: 2

Related Questions