Media query not working in IE9

Question

I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)

All browsers, with the exception of IE9, show desktop site as needed. Mobile browsers correctly show the mobile layout. The problem with IE9 is that it also shows the mobile layout.

Now if I remove the words "only" and "screen" from the above code, IE9 then correctly displays the desktop site. The problem is, then the mobile browsers also display the desktop site. I've done some research on this, and haven't seen anything on this issue.

Thanks for reading,

John

Skilken

"IE9, get out of that mobile stylesheet. You are a desktop browser. You aren't even on Windows Phone." – Eyelet

Answer 1

Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9

Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -

<meta http-equiv="X-UA-Compatible" content="IE=9">

The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.

Lemmuela

Spent a good hour trying to figure out why my media queries weren't working for me in IE 11. Turns out adding this fixed my issue! – Respectively

Answer 2

From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".

According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".

In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.

Gadolinium

As for now the link you have provided to msdn has description of device-width feature + CSS3 Test says that IE9 supports device-width. So it's working. – Breakout

Answer 3

Yes, use the @media (max-width: 860px) instead of max-device-width.

IE 9 just gave me a heart attack. The project media queries did not work.

Then after some minutes of googling, you have to include the CSS in the HTML. Inline styles only!

What a drag these IE browsers are!

Purr

Answer 4

I usually add this to my projects and it's been working for me so far:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Ironic

Interesting, since this targets versions of IE less than 9. – Diecious

Answer 5

IE compatibility mode solves the issue. Go to Compatibility View Settings and disable the option Display intranet sites in Compatibility View.

Scalise