CODEWITHSUNDEEP
cssmedia-queries
Michel
Michel

Reputation: 23645

css media query not working for Iphone (Chrome and Safari) / Apple MBP Safari

I am starting a new site and was gathering some feedback for my to-develop CSS media query, to see which resolutions were reported by some devices

I asked some friends to test the css media query, and it turned out no Iphone user returned a result for the resolution part.

What it comes down to is when I use this code

@media only screen and (min-resolution: 5dpi)  {
    h1 {color: orange;}
    .desc1:after {content:" The resolution is for you";}
}

This works on all devices (desktops, android, chrome, firefox) except Iphones and Safari on the Mac (works on Chrome on the Mac)

In the head I have this line also:

<meta name="viewport" content="width=device-width, initial-scale=1">

Any guess why this does not work on some devices?

Upvotes: 1

Views: 901

Answers (1)

Nicolas Galler
Nicolas Galler

Reputation: 1309

You need to use "-webkit-min-device-pixel-ratio" for Safari. See http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

Upvotes: 1

Related Questions