Site réactif ne fonctionne pas dans IE (en dépit de css3-mediaqueries.js)

Je crée un site Web responsable mais je ne peux pas sembler le faire fonctionner dans IE (je teste IE8). Maintenant, je sais que Internet Explorer 8 et ci-dessous ne prennent pas en charge les requêtes multimédias CSS3. Mais j'ai inclus le fichier css3-mediaqueries.js Javascript (hébergé par Google) et ça ne fonctionne toujours pas.

J'ai supprimé tout le code en laissant le minimum (littéralement seulement 26 lignes de HTML et 34 lignes de CSS combinées). Le HTML valide avec succès comme HTML5 et le CSS valide comme CSS niveau 3. Voici le code:

HTML

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" /> <title>Responsive Site</title> <link rel="stylesheet" type="text/css" href="css/custom.css" /> <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- css3-mediaqueries.js for IE less than 9 --> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body> <div class="wrapper"> <div id="article">&nbsp;</div> <div id="side">&nbsp;</div> </div> </body> </html>

CSS personnalisé:

 @charset "UTF-8"; /*html5 display rule*/ article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;} body {margin: 0px; padding:0px} .wrapper { width:78%; margin:0 auto} #article { float:left; width:61.224489795%; margin:20px 0 0 0; padding:0; height:500px; background-color:#000} #side { float:right; width:30.775510204%; margin:20px 0 0 0; padding:0; height:500px; background-color:#999}

Responsive.css:

 @charset "UTF-8"; #article { width:100%} #side { width:100%; clear:left}

En plus de l'impossibilité d'utiliser les feuilles de style @importées (documentées sur le projet Github et Google Code) – il y a un problème si l'on n'expose pas explicitement la requête multimédia dans un format similaire à:

 @media screen and (min-width: 666px) and (max-width: 1000px)

par rapport à:

 @media and (min-width: 666px) and (max-width: 1000px)

Regardez ce problème dans la section des problèmes de github pour ce projet – après environ une heure d'essayer de configurer ceci – le manque d' écran dans mes requêtes sur les médias les faisait ne pas être reconnu.

J'ai finalement compris ça! Et seules quelques lignes de code devaient changer.

Un ami a souligné que la documentation pour le fichier Javascript css3-mediaqueries.js lit:

Remarque: Ne fonctionne pas sur les feuilles de style importées (que vous ne devriez pas utiliser de toute façon pour des raisons de performances). Également, n'écoutera pas l'attribut média des éléments et.

J'utilise l'attribut multimédia dans l'élément de lien dans mon fichier HTML. Donc, voici ce que j'ai fait pour résoudre le problème:

Dans le fichier HTML que j'ai supprimé:

 <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />

Et l'a remplacé par:

 <link rel="stylesheet" type="text/css" href="css/responsive.css" />

J'ai ensuite ajouté l'attribut média à mon fichier responsive.css:

 @charset "UTF-8"; @media screen and (max-width: 800px) { #article { width:100%} #side { width:100%; clear:left} }

Mais cela ne fonctionnait toujours pas. J'ai ensuite modifié la commande des médias et des attributs @charset dans mon fichier responsive.css. J'ai simplement réarrangé les lignes 1 et 2:

 @media screen and (max-width: 800px) { @charset "UTF-8";

Cela a fait l'affaire. Vous ne savez pas exactement pourquoi la commande de l'ensemble de personnages fait la différence? Peut-être quelqu'un peut-il éclairer.

Merci David pour les suggestions utiles! Il est bon d'avoir plusieurs options dans le hangar d'outils et je peux me tourner vers response.js dans le futur. Mais pour l'instant, je suis content du code que Google accueille.

Avez-vous essayé response.js ?

Bonne chance!

Mettre à jour

Il peut être plus sûr de combiner vos deux fichiers CSS en un seul. Ajoutez les spécifications mobiles dans votre fichier custom.css avec:

 @media (min-width: 50px) and (max-width: 800px) { /* mobile CSS here */ } /* close @ media for mobile */

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

Vous devez placer cela avant toute autre balise méta.