La consulta de medios no funciona en IE9

Tengo un problema extraño que solo ocurre con IE9. Estoy trabajando en una página web que tiene un diseño de escritorio y un diseño móvil. Mismo HTML, CSS diferente. El problema ocurre con el siguiente código:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px) 

Todos los navegadores, con la excepción de IE9, muestran el sitio de escritorio según sea necesario. Los navegadores móviles muestran correctamente el diseño del dispositivo móvil. El problema con IE9 es que también muestra el diseño del móvil.

Ahora, si elimino las palabras “solo” y “pantalla” del código anterior, IE9 muestra correctamente el sitio del escritorio. El problema es que los navegadores móviles también muestran el sitio del escritorio. Hice algunas investigaciones sobre esto y no he visto nada sobre este tema.

Gracias por leer,

John

En caso de que alguien esté rastreando SO para obtener una respuesta a esto, las dos respuestas anteriores no resuelven el problema central que aquí se responde: la consulta de CSS no funciona en IE 9

Básicamente, las consultas en línea de CSS3 funcionan en IE9 pero tienes que deshabilitar el modo Compatibilidad –

  

La metaetiqueta anterior debe colocarse antes que cualquier otra metaetiqueta; de lo contrario, IE9 activará el modo de compatibilidad de manera predeterminada y, posteriormente, no funcionará.

Por lo que puedo decir, todo se reduce a que IE9 no interprete “ancho mínimo del dispositivo” y “ancho máximo del dispositivo”.

De acuerdo con http://msdn.microsoft.com/library/ms530813.aspx , no admite esas propiedades, solo “min-width” y “max-width”.

Además, http://www.w3.org/TR/css3-mediaqueries/#error-handling establece que el navegador debe ignorar las propiedades que no reconoce. No es así con IE9 parece.

Sí, use @media (max-width: 860px) lugar de max-device-width .

IE 9 acaba de darme un ataque al corazón. Las consultas de medios del proyecto no funcionaron.

Luego, después de algunos minutos de búsqueda en Google, debe incluir el CSS en el HTML. ¡Estilos en línea solamente!

¡Qué resistencia tienen estos navegadores IE!

Normalmente agrego esto a mis proyectos y hasta ahora ha funcionado para mí:

  

El modo de compatibilidad IE resuelve el problema. Vaya a Configuración de vista de compatibilidad y desactive la opción Mostrar sitios de intranet en la Vista de compatibilidad .