媒体查询不适用于 ie10答案

【问题标题】：media query is not working on ie10媒体查询不适用于 ie10
【发布时间】：2013-12-05 13:29:28
【问题描述】：

我创建了一个响应式网站，并且在我的 CSS 中使用了媒体查询。 chrome 和 FF 上的一切看起来都不错，但 ie10 忽略了我的所有查询。我在标题上有<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">，因为该网站是为平板电脑设置的。我试图删除元标记，但没有解决问题。

我几乎尝试了所有方法：

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) 
@media only screen and (max-width: 800px)
@media screen and (max-width: 800px)
@media all and (max-width: 800px)
@media (max-width:800px)

似乎没有任何效果。

【问题讨论】：

标签： internet-explorer css responsive-design media-queries

【解决方案1】：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    }

把你的东西放进去，IE 10 hack 不同于旧版本的 IE。并在媒体查询中使用它

@-ms-viewport { width:device-width; zoom:1.0; }

【讨论】：

【解决方案2】：

如果您有一个 JSFiddle 或示例链接来提供更好的示例，那就更好了。 Jaynath 提供了很好的建议。 FWIW IE 会忽略视口标签，但在手机上除外。 ViewPort 不是一个实际的标准，它是 Android、Windows Phone 等提供一些支持的 Apple 惯例。 @viewport 规则是一个实际的标准。

【讨论】：

【解决方案3】：

你可能需要@-ms-viewport { width:device-width;缩放：1.0； }

【讨论】：