Tom*_*Tom 8 css html5 css3 media-queries responsive-design
我发现IE9正在为我的网站采用平板电脑样式.
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
/* tablet styles */
}
当浏览器的宽度为1024px时,上述媒体查询将应用于IE9.
做了一些研究之后,我发现了以下问题/解决方案,它提供了解释为什么会发生这种情况的原因.
从我所知,它归结为IE9不解释"min-device-width"和"max-device-width".
根据http://msdn.microsoft.com/library/ms530813.aspx,它不支持这些属性,只支持"min-width"和"max-width".
此外,http://www.w3.org/TR/css3-mediaqueries/#error-handling 声明浏览器应该忽略它无法识别的属性.似乎IE9不是这样.
我还发现了这个问题:在响应式网站上进行媒体查询的常见断点,但它没有给我一个解决方案.
如何将样式表仅应用于平板电脑而不是IE9等桌面浏览器,宽度为1024px？
您需要在<head>文档中添加此元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
然后在你的CSS中你可以替换：
min-device-width和min-widthmax-device-width和max-width。