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 hap

Answer 1

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!

Answer 2

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

Answer 3

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.

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]-->

Answer 5

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.