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

【问题标题】：How to target tablets but not IE9 using a media query如何使用媒体查询定位平板电脑而不是 IE9
【发布时间】：2013-03-04 04:40:45
【问题描述】：

我发现 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 */
}

上面的媒体查询是在IE9浏览器宽度为1024px时应用的。

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

Media query not working in IE9

据我所知，归结为 IE9 没有解释 “最小设备宽度”和“最大设备宽度”。

根据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 等 1024 像素宽度的桌面浏览器？

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

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

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

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

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

【讨论】：

@Tom：这个解决方案有帮助吗？
是的，确实有帮助，我没有意识到你可以做到这一点。然而，我仍然发现其他浏览器正在采用平板电脑样式。我想出的解决方案是github.com/barisaydinoglu/Detectizr 检测平板电脑，然后手动加载样式表。打算做一些进一步的研究
对不起，我误解了这个问题。我没有意识到您只想将 css 应用于平板电脑，而不是应用于屏幕与平板电脑相同大小的计算机。出于兴趣，您是否有任何理由要专门针对平板电脑？平板电脑样式对小型计算机屏幕不是同样有用吗？
更多的是性能问题，我正在做的特定页面在 iPad 上表现不佳，我们改为使用移动页面的自适应版本