CSS3 media queries not working on Safari on iPod/iPhone

Question

I am developing a responsive design website. The website will be optimized for iPhone and iPod (Both having width 640px).

I am using the following CSS3 media queries:

    @media screen and (max-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

Above code works great on my desktop browsers when i shrink browser width to 640px. However the code does not work when i try to test the website on iPod using Safari browser.

I changed the CSS3 media queries to

    @media screen and (max-device-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-device-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

Now, the responsive design worked for Safari on iPod but it messed up with layouts on all other desktop browsers. Those css3 media queries were totally ignored by oChrome, IE, FF on my desktop (for width 640px).

So by now i have figured out there is something related to cross browser compatibility with css3 media queries, but could not find much info about this. what can be the ways i can update my code to make css3 media queries working for all browsers (or atleast major ones). I am targeting atleast

IE Windows
Safari Windows
Chrome Windows
Firefox Windows
Safari iPod
Chrome iPod

Take a look at http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html for some info regarding meta tags and media queries. I think might be what you're running into. The device width and content width are not the same, so the media query is actually working as expected, just not according to what you need. — aaronburrows, May 08 '13 at 19:06

score 12 · Accepted Answer · edited Feb 19 '14 at 16:15

12

If you don't add the following <meta> tag on your HTML the device will ignore your media queries

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
    </body>
</html>

edited Feb 19 '14 at 16:15

Tom Leese

19,309
12
45
70

answered May 09 '13 at 03:31

Vinícius Moraes

3,506
2
22
24

thanks. but the thing is i still have to fix a lot of UI stuff like paddings, width, margins etc. – CodeMonkey May 09 '13 at 18:50
3

@CodeMonkey but the media queries are working right ? so you should close this question. I hope you can fix that problems good luck bro – Vinícius Moraes May 09 '13 at 18:55
yes yeah i have to do some sloppy coding. some hard coding. kind of stuff i don't prefer at all. deadlines at my end so had to push that. Thanks for your 2 cents – CodeMonkey May 09 '13 at 19:10
With regards to padding/margin, etc. - do you just need to use normalize.css? – CodeFinity Apr 17 '16 at 13:02
1

What if you already have the meta tag but media queries are still not working? – Bas van Dijk Nov 06 '18 at 14:35

CSS3 media queries not working on Safari on iPod/iPhone

1 Answers1