媒体查询在IE9中不起作用 [英] Media query not working in IE9

问题描述

我遇到了一个奇怪的问题，只发生在IE9上.我正在处理一个具有桌面布局和移动布局的网页.相同的HTML，不同的CSS.该问题发生在下面的代码中:

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)

除IE9之外，所有浏览器均根据需要显示桌面站点.移动浏览器正确显示移动布局. IE9的问题在于它还显示了移动布局.

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.

现在，如果我从上面的代码中删除了"only"和"screen"一词，则IE9会正确显示桌面站点.问题是，然后移动浏览器还会显示桌面站点.我已经对此进行了一些研究，但在此问题上什么都没看到.

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.

感谢阅读，

约翰

推荐答案

以防万一有人在爬行以寻求答案，以上两个答案都不能解决这里要回答的核心问题-CSS媒体查询在IE 9中不起作用

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

基本上内联CSS3媒体查询确实可以在IE9中工作，但是您必须禁用兼容模式-

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

上面的元标记必须放置在任何其他元标记之前，否则IE9将默认启用兼容模式，随后将不起作用.

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.

这篇关于媒体查询在IE9中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！