Media query not working in IE9

css internet-explorer-9 mobile-website media-queries
John Hansen picture John Hansen · Jun 21, 2011 · Viewed 45.6k times · Source

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

Answer

Scott Sword picture Scott Sword · Mar 15, 2013

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.

Related questions

Gradients in Internet Explorer 9

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters? What I've got for the other browsers is: background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left …

Read More
Why does IE9 switch to compatibility mode on my website?

I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing …

Read More
CSS3 transform: rotate; in IE9

I have an element that needs to be vertical in a design I have done. I have got the css for this to work in all browsers except IE9. I used the filter for IE7 & IE8: progid:DXImageTransform.Microsoft.…

Read More