Safari ignoring css max-width media queries below a certain point

Question

I\'m working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the

Answer 1

I was also facing a similar issue with media query the queries were working at wrong break points: This thread has something that might help others coming here. To quote

Try zooming to a zoom in/out to 0 ie. normal resolution. Press Command + 0

Just a thought: could you have your font sizes bumped up in Safari? Try pressing Command 0 to make sure it’s reset to the default font size.

No but what you said made me figure it out!!! Thank you both for helping me work through this. The problem is, I was testing the media query not by resizing the window, but by zooming in on the page.

So, my question isn’t what I thought it was. Should I re-post this as a new question? In FF and Chrome, the media query in the above code kicks in when I zoom in on the web page, but in Safari, it doesn’t. Is there anything I can do to make Safari act more like FF and Chrome here?

Answer 2

Turns out I was missing a squiggly brace, so I had code like the following:

@media screen and (max-width: 767px){
    /* lots of css */
    .some_selector { padding: 20px; /*<---- missing squiggly brace*/
    /* more css */
}
@media screen and (max-width: 640px){
    /* lots more css */
}

Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.

Thanks for the help everyone, I feel pretty silly now.

Answer 3

@media rules are the same concept as normal css rules, the latest rule overwrites the first one. but if a rule is different it would not overrule it.

you could make a workaround by typing, this code would just interpreted by webkits

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}