IE执行小设备规则css媒体查询

Question

IE 6-7-8 (dunno 9)在不考虑媒体规则的情况下执行此css。

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 680px), only screen and (max-device-width: 680px)" href="styles/small-device.css" />  

这一条没问题：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 680px)" href="styles/small-device.css" />

为什么？

在我的脑海里，我有这样的想法：

<meta name="viewport" content="width=device-width,initial-scale=1">

Answer 1

这是因为IE特别是IE6 (根本不支持)并不完全支持此媒体查询的CSS3功能。

您应该尝试使用浏览器嗅探进行有条件的资源加载。因为IE6、7、8没有在小型设备中使用，所以您可以将两者结合使用。在WP7中使用IE9

<!--[if lte IE 8]>
<style type="text/css" media="screen"/>

<![endif]-->
<!--[if !(lte IE 8)]>
<style type="text/css" media="screen and (min-device-width: 450px)"/>

<![endif]-->

http://www.akademy.co.uk/blog/2010/03/css-style-ie6-media-hack/

更新:我的建议是，对于所有is，安全地使用非小屏幕CSS是安全的，因为它们在小屏幕设备上不可用。

如果你想在调整大小的浏览器中使用它，那么这在IE中是不可能的，除非你在CSS中使用jscript (动态属性)。例如：

div {
  min-height: 300px;

  /* simulates min-height in IE6 */
  _height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}