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 código de abajo:La consulta de medios no funciona en IE9

@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 sitio de escritorio como 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

Fuente

2011-06-20 John Hansen

["IE9, sal de esa hoja de estilo móvil. Eres un navegador de escritorio. Ni siquiera estás en Windows Phone."] (Http://knowyourmeme.com/memes/Buzzkilling) – BoltClock

de lo que puedo decir, todo se reduce a IE9 no interpretar "min-device-width" y "max-device-width".

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 indica que se supone que el navegador ignora las propiedades que no reconoce. No es así con IE9 parece.

Fuente

2011-07-19 19:48:20 benklocek

Como por ahora el enlace que ha proporcionado a [msdn] (http://msdn.microsoft.com/library/ms530813.aspx) tiene una descripción de la función 'device-width' + [CSS3 Test] (http: // css3test.com /) dice que IE9 admite 'device-width'. Entonces está funcionando. –

Sí, utilice @media (max-width: 860px) en 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 de Google, debe incluir el CSS en el HTML. ¡Solo estilos en línea!

¡Qué resistencia tienen estos navegadores IE!

Fuente

2012-11-12 22:40:12 bernhard

Sólo en caso de que alguien se está arrastrando SO de una respuesta a esto, las dos respuestas anteriores no resuelven el problema central que está respondida aquí - CSS media query not working in IE 9

CSS3 preguntas de los medios en línea Básicamente hacer el trabajo en IE9, pero usted tiene desactivar el modo de compatibilidad -

<meta http-equiv="X-UA-Compatible" content="IE=9">

La etiqueta meta anterior tiene que ser colocado antes cualquier otra meta tags de lo contrario IE9 defecto en el modo de compatibilidad en y serán posteriormente no funcionar.

Fuente

2013-03-15 21:48:12 Swordfish0321

Antes incluso de ''? – Saul

Esto me ayudó ... – Xarcell

Esto no funcionó en mi caso. Muy frustrante. –

Yo suelo añadir esto a mis proyectos y ha estado trabajando para mí hasta ahora:

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Fuente

2013-04-30 18:40:32 Diego

Interesante, ya que esto se dirige a versiones de IE * menos * que 9. –

Esto funcionó para mí. En IE 9 también. – KWorrall

modo de compatibilidad de IE resuelve el problema. Ir a Compatibilidad Ver configuraciones y deshabilitar la opción Mostrar sitios de intranet en la Vista de compatibilidad.

Fuente

2016-08-01 07:54:32 stpolit

La consulta de medios no funciona en IE9

Respuesta

Cuestiones relacionadas