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 中应用。

经过一些研究，我发现了以下问题/解决方案，它解释了为什么会发生这种情况。

媒体查询在 IE9 中不起作用

据我所知，归结为 IE9 没有解释“min-device-width”和“max-device-width”。

根据http://msdn.microsoft.com/library/ms530813.aspx它不支持这些属性，只支持“最小宽度”和“最大宽度”。

此外，http://www.w3.org/TR/css3-mediaqueries/#error-handling 声明浏览器应该忽略它无法识别的属性。IE9 似乎并非如此。

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

如何将我的样式表仅应用于平板电脑而不应用于 IE9 等 1024 像素宽度的桌面浏览器？

4

1 回答 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.
于 2013-03-15T13:36:24.877 回答