How can I apply 2 media queries in IE8 with respond JS?

Question

All the code works fine in IE9+.

This works in IE8 using respond.js:

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

This does not:

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

Does anyone know another way to pass the media query to IE8?

Answer 1

Well, maybe i got it all wrong but you are specifying -webkit-stuff AND other width queries.

I don't believe ie will understant -webkit- but can buggyly understand min-resolution.

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

By buggyly, i mean, all i found is not clear, and because you are using respond.js, it might be forced. I found something on respond.js guihub as a duplication of this other issue

To target IE8 only via media query :

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

To exclude IE8 only use a condition comment :

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

Answer 2

The problem occurs because as Milky suggests, IE8 does not recognise -webkit-.

However, rather than ignoring the query completely, it still reads and applies the min-width query, thereby applying code that is meant for displays with higher resolution.

The fix is to exclude the min-resolution query from IE8 altogether.

http://browserhacks.com/ provides a great repo for this. The code I ended up using was:

@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
  }
}