Search code examples
safarimedia-queries

Media queries not working with Safari

Why does the following media query work fine in FF (22.0) and Chrome (28.0.1500.71), but Safari (6.0.5) ignores it?

In case it's relevant, I'm using Mac OS X (10.7.5) macbook pro 13"

Thank you for your help!

Also, does anyone know if it works in IE?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">

body {background-color:#efefef;}
h1 {color:black;}

@media only screen and (max-width:37.5em) {
body {background-color:#000000;}
h1 {color:white;}
}

</style>
</head>
<body>

<h1>Hi.</h1>

</body>
</html>
Solution

  • I found out why it wasn't working:

    To test the media query, I was zooming in on the page, rather than resizing the browser window, and in Safari, unlike FF and Chrome, the media query doesn't kick in until you've refreshed the browser.