¿Cómo evito que respond.js lea mi consulta de retina display media?

He agregado responder.js para activar las consultas de medios en ie7 + 8, el problema que tengo es que ie7 + 8 ahora parece leer la consulta de medios de pantalla Retina que, como se puede imaginar, está estropeando mi layout. ¿Alguien más ha experimentado este problema y, de ser así, cómo se puede prevenir?

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { } 

Actualización para cualquiera que tenga el mismo problema:

Básicamente moví cualquier consulta de medios hd en su propio file .css (hd.css) y luego agregué una statement condicional en la sección de mi sitio que evita que lte IE 8 la vea.

Puede agregar una class específica para la detección de IE (si no lo ha hecho) a su label html con jQuery, muy similar a Modernizr para las capacidades del browser. A continuación, ajuste los styles dentro de la consulta de medios:

 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { html.no-ie div#mydiv{ /* STYLES FOR #mydiv HERE */ } } 

Detecta el browser con la propiedad jQuerys $ .browser y agrega una class a tu label html (con versión … porque … ¿por qué no?):

 /* CHECK IF BROWSER IS IE */ if($.browser.msie){ /* GET THE BROWSER VERSION...BECAUSE WE CAN! */ var version = $.browser.version; /* ADD CLASSES FOR BROWSER + VERSION TO HTML TAG ie. <html class="ie ie6"> */ $('html').addClass("ie ie" + Math.floor(version)); } 

Espero que sea útil.

Intente eliminar las references de "solo pantalla" de su consulta de medios, para que se lea:

 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2){ } 

con el encabezado de documento repetitivo, agregué una class "moderna" al último condicional sin condiciones la que tiene <! -> antes de la label html:

 <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js es lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js modern" lang="en"> <!--<![endif]--> 

luego en mi retina css: si retina css está dentro de una consulta de medios con máx. y mín. (esto por lo que responde.js lo lee), tengo:

 .modern #logo a { /*w & h LOGO */ background-image: url(../images/logo_@2x.png); -moz-background-size:200px 81px; /*w & h of original 72dpi image REMEMBER THIS IS THE LARGE LOGO*/ -ie-background-size:200px 81px; -o-background-size:200px 81px; -webkit-background-size:200px 81px; background-size:200px 81px; } 

Utilizo una combinación de las respuestas de Steve O y Christina Arasmo Beymer:
Para ser un poco más específico para las capacidades de consultas de medios, incluí la detección de css-mediaqueries en mi compilation personalizada de Modernizr . Luego tiene una class de mediaqueries en su label html, no tiene que escribir su propia JS o agregar manualmente una class a su html.

Ahora puedes hacer:

 @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { html.mediaqueries #element { } } 

Si usas Compass, puedo recomendar este mixin: Retina-Sprite-for-Compass

Mi solución muy simple explota el problema central del error para solucionarlo solo. El problema principal es que respon.js ve la propiedad -webkit-min-device-pixel-ratio, no sabe qué hacer y simplemente lo ignora, mostrando incorrectamente el bloque de estilo. Mi solución es copyr todo el bloque de consulta de medios, pegarlo en el CSS justo después y cambiar '-webkit-min-device-pixel-ratio' a '-webkit-useless-fake-property' y luego hacer que todas las reglas de css sean negación del bloque anterior. ¡respon.js TAMBIÉN ignorará esto, lo pasará y deshará el bloque anterior!

Ejemplo:

 @media all and (-webkit-min-device-pixel-ratio:2) { #selector { background-image:url("img2x.png"); /* 1000 x 400 */ background-size:500px 200px; } } @media all and (-webkit-useless-fake-property:2) { #selector { background-image:url("img.png"); /* 500 x 200 */ background-size:auto; } } 

Viendo que esto es realmente solo para imágenes de retina, no habrá muchas reglas para 'deshacer'. El browser que no tiene la cabeza debajo de una roca y los dedos en los oídos utilizará CSS3 nativo y simplemente ignorará la consulta de medios de -webkit-inútil-propiedad falsa.