Question

我发现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但它没有给我一个解决方案。

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

Answer 1

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

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

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

min-device-width与min-width
max-device-width与max-width。

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

1 个答案: