Question

所有代码在IE9 +中都能正常工作。

这可以在IE8中使用respond.js：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  // Code
}

这不是：

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), 
(min-resolution: 192dpi) and (min-width: 700px){
  // Code
}

有没有人知道将媒体查询传递给IE8的另一种方式？

Answer 1

好吧，也许我说错了，但你指的是-webkit-stuff AND 其他宽度查询。

我不相信ie会理解-webkit-但可能会错误地理解最小分辨率。

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), 
(min-resolution: 192dpi) and (min-width: 700px){
  // Code
}

错误的是，我的意思是，我发现的一切都不清楚，而且因为你正在使用respond.js，它可能会被迫。我found something on respond.js guihub作为duplication of this other issue

仅通过媒体查询定位IE8：

@media \0screen {
    .your-css { background: blue; }
}

要排除IE8，请仅使用条件注释：

<!--[if !IE 8]> 
   @media queries for all browsers except IE 8
<![endif]-->

Answer 2

问题出现是因为正如Milky所说，IE8无法识别-webkit-。

但是，它不是完全忽略查询，而是仍然读取并应用min-width查询，从而应用适用于具有更高分辨率的显示的代码。

修复方法是完全从IE8中排除min-resolution查询。

http://browserhacks.com/为此提供了一个很好的回购。我最终使用的代码是：

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: @screen-md-min), 
(min-resolution: 192dpi) and (min-width: @screen-md-min){
    :root * > .selector { 
// code
  }
}

如何通过响应JS在IE8中应用2个媒体查询？

2 个答案: