La requête multimédia ne fonctionne pas dans IE9
J'ai un problème étrange qui ne se produit qu'avec IE9. Je travaille sur une page Web qui a une mise en page de bureau et une mise en page mobile. Même HTML, CSS différent. Le problème se produit avec le code ci-dessous:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
Tous les navigateurs, à l'exception de IE9, affichent le site de bureau selon les besoins. Les navigateurs mobiles affichent correctement la mise en page mobile. Le problème avec IE9 est qu’il montre également la disposition mobile.
Maintenant, si je supprime les mots "seulement" et "écran" du code ci-dessus, IE9 affiche alors correctement le site de bureau. Le problème est que les navigateurs mobiles affichent également le site de bureau. J'ai fait des recherches à ce sujet et je n'ai rien vu à ce sujet.
Merci d'avoir lu,
John
Juste au cas où quelqu'un essaierait SO pour trouver une réponse à cette question, les deux réponses ci-dessus ne résolvent pas le problème principal auquel il est répondu ici - La requête multimédia CSS ne fonctionne pas dans IE 9
Fondamentalement, les requêtes multimédia CSS3 en ligne fonctionnent dans IE9, mais vous devez désactiver le mode Compatibilty -
<meta http-equiv="X-UA-Compatible" content="IE=9">
La balise méta ci-dessus doit être placée avant toute autre balise méta, sinon IE9 passera par défaut en mode de compatibilité et ne fonctionnera pas par la suite.
D'après ce que je peux dire, cela revient à IE9 qui n'interprète pas "min-device-width" et "max-device-width".
Selon http://msdn.Microsoft.com/library/ms530813.aspx il ne prend pas en charge ces propriétés, mais uniquement "min-width" et "max-width".
De plus, http://www.w3.org/TR/css3-mediaqueries/#error-handling indique que le navigateur est censé ignorer les propriétés qu'il ne reconnaît pas. Pas si avec IE9 semble-t-il.
Oui, utilisez @media (max-width: 860px) au lieu de max-device-width.
IE 9 vient de me donner une crise cardiaque. Les requêtes de médias du projet n'ont pas fonctionné.
Ensuite, après quelques minutes de recherche sur Google, vous devez inclure le code CSS dans HTML . Styles en ligne uniquement!
Quelle traînée ces navigateurs IE sont!
J'ajoute généralement ceci à mes projets et cela a fonctionné pour moi jusqu'à présent:
<!--[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]-->
Le mode de compatibilité IE résout le problème .. Allez dans Paramètres d'affichage de compatibilité et désactivez l'option Afficher les sites intranet dans l'affichage de compatibilité .