19

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

1

5 Answers 5

32

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.

1
  • 1
    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!
    – ESR
    Jul 29, 2014 at 9:40
7

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.

1
  • 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. Apr 2, 2014 at 6:48
5

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!

2

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]-->
1
  • 3
    Interesting, since this targets versions of IE less than 9. Jan 31, 2014 at 20:49
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.