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">
最佳答案
这是因为这个媒体查询是一个 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");
}
关于css - IE 执行小型设备规则的 css 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9598153/