首页 文章

如何使用媒体查询定位平板电脑而不是IE9

提问于
浏览 次
8

我发现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 .

做了一些研究之后，我发现了以下问题/解决方案，它提供了解释为什么会发生这种情况的原因 .

Media query not working in 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不是这样 .

我也发现了这个问题：Common breakpoints for media queries on a responsive site但它没有给我一个解决方案 .

如何将样式表仅应用于平板电脑而不是IE9等桌面浏览器，宽度为1024px？

css html5 css3 responsive-design media-queries

1 回答

  • 2

    您需要在文档的 <head> 中添加此元标记：

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

    然后在你的CSS中你可以替换：

    • min-device-width 与 min-width

    • max-device-width 与 max-width .

    回复于

相关问题