Safari: Media Query Not Firing At the Expected Width

Media Query not working on Iphones (Safari and Chrome)

It might be because iPhones (especially older ones) can have smaller screen sizes than most Android phones. Therefore, the text can be pushed down in order to avoid smushing. For your case, I would use flexbox instead of the approach you're taking.

.yourentirebutton {

    display: flex;
    justify-content: center;
    align-items: center;

}

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

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.

Safari undoes media queries

You are getting some very weird results in Safari, where your media queries can't override the main classes even though you load them afterwards.

I have only tried this in dev tools but by going up a step in the DOM tree it seems to force your media queries to behave properly.

@media (min-width: 300px) and (max-width: 999px) {
    body header nav ul {
        display: none;
    }
}

Why the sizes are different in Chrome and Safari (Media Query Problem)

You need to remove display:flex from the body of the page.

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

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/

OSX Safari applying media query 15 pixels early

window.innerWidth is the width of the viewport, which includes vertical scrollbars.

My guess is the media queries are triggering based on the width of the viewport minus the scrollbar, which would account for the 18px discrepancy. This explains it better than I can:

http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/

Media Queries firing at wrong width

A common reason this happens is if you have zoomed the browser window to a size other than 100%. In your browser, select the drop-down menu 'View' and make sure it is set to 100%. If you are zoomed in or out, it will trigger media-queries inappropriately.

And don't worry about feeling embarrassed. It has probably happened, or will happen to everyone.. but only once.

In order to avoid this issue all together, you should considering defining your media queries using a relative units (em or rem rather than px).

You can also enforce setting the browser zoom level to 100% on page load using javascript.

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;