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

Question

IE 6-7-8(不知道 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

这是因为这个媒体查询是一个 CSS3 特性，IE 不完全支持，尤其是 IE6(根本不支持)。

您应该尝试使用浏览器嗅探进行条件资源加载。因为 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/

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

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

div {
  min-height: 300px;

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