Media queries not working with Safari

Hi!

I’m just wondering why the following media query works in FF (22.0) and Chrome (28.0.1500.71), but not Safari (6.0.5).

In case it’s relevant, I’m using the Mac OS X (10.7.5) – laptop, not mobile.

Thanks for your help!!!

Also, does anyone know if it works in IE?


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</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>

Hi,

Media queries are supported in IE9+ and you can see the full support tables here.

As you can see Safaria 6.05 is supported so your code should work. Have you tried clearing the cache on the browser?

Otherwise put a version online so we can test it live and see if we can spot anything.

Hi, thanks for your help! I have tried clearing my cache, but it’s still not working :frowning:

If you want to see it just copy and paste the above code into a text file, save it with an HTML extension, and load it into your web browser.

I’ve heard it works fine on Windows, but it’s just not working for me.

Yes I already did that :slight_smile:

I checked on Windows (safari 5.1.7) and OSX 10.6.8 safari 5.1.9 and the media query worked fine.

That’s why I wanted to see your actual page in case there was anything else in there that may have caused a problem. Sometimes a typo miles away from the code in question can trip up one browser but not another.

I can’t think of another reason for it not to work.

Huh. Well, thank you so for trying to help me, regardless! I appreciate it. But yeah, I don’t get it, I mean it’s literally the above code that isn’t working for me – it’s the bare-bones code I ended up with after trying to debug my actual webpage, and I fully expected to find a typo or something in the process, but nope :scratch:

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?

Hi,

That used to be the same in Chrome also and was recently fixed so hopefully Safari will follow suit shortly.

I don’t see it as a big issue as it only happens when you zoom up and down - if you refresh the page the media query is triggered. A user who navigates to the page with the zoom setting already in place will see the required layout. It’s only when you zoom up and down on the current page that they aren’t triggered properly but hopefully the recent webkit fix will find its way into Safari eventually.

Thank you! I didn’t notice that it reset when you refreshed. Problem solved! :slight_smile: