jQuery redimensionner la fenêtre et Google Chrome

Question

Je ne peux pas résoudre un problème que j'ai avec le redimensionnement d'un menu. Le code que je vais publier ne fonctionne pas uniquement sur Chrome.

Étant une situation difficile à expliquer par des mots, je vais vous montrer quelques captures d'écran du problème.

Ceci est mon menu ressemble à l'ouverture:

Lorsque je redimensionne la fenêtre < = 605px du navigateur, le code jQuery supprimer la gauche flottante, et donc les éléments sont mis dans la colonne et centrée . (désolé, je ne peux pas poster plus de 2 liens)

Lorsque je le redimensionner> 605, il devrait ressembler à la première image (et cela fonctionne réellement sur ie et firefox), mais sur chrome, il apparaît comme ceci:

est ici le code.

HTML:

<div id="containerMenu"> 

    <div id="menu"> 

     <ul> 

      <a href="index.html"><li>HOME</li></a> 
      <li>SERVIZI</li> 
      <a href="wedding.html"><li>WEDDING</li></a> 
      <a href="food.html"><li>FOOD</li></a> 
      <a href="contatti.html"><li>CONTATTI</li></a> 

     </ul> 

    </div> 

</div> 

CSS (seulement les choses utiles):

#containerMenu {width:100%; 
    text-align:center;} 

#menu {display:inline-block} 

#menu li {float: left;} 

jQuery:

$(window).resize(function() 
    { 
    if($(window).innerWidth() <= 605) 
     { 
     $("li", $("#menu")).css("float","none") 
     } 

    else 
     {     
     $("li", $("#menu")).css("float","left") 
     }     
    }) 

Bien sûr, j'ai le code pour le laisser se produire même si la fenêtre n'est pas redimensionnée, mais seulement ouverte avec une largeur < = 605, mais c'est exactement la même que celle ci-dessus, juste sans l'événement .resize().

Pouvez-vous m'aider à rendre ce code compatible avec google chrome?

Merci, Stefano

Answer 1

Pendant que vous pouvez gérer ce genre de chose avec jQuery, il serait beaucoup plus simple d'ajouter un media query à votre CSS. Quelque chose de similaire à

/* Your normal css */ 
#containerMenu { 
    width:100%; 
    text-align:center; 
} 
#menu { 
    display:inline-block 
} 
#menu li { 
    float: left; 
} 

/* Media query */ 
@media (max-width: 605px) { 
    #menu li { 
     float: none; 
    } 
} 

Ceci fonctionnera de manière transparente sur tous les navigateurs. Qu'est-ce qui se passe dans les coulisses ici: Vous dites au navigateur que vous voulez que les éléments de la liste pour le menu soient float: left. Mais après cela, vous ajoutez une exception avec un max-width de 605px, c'est-à-dire si la fenêtre du navigateur est 605px ou moins, vous voulez réellement que les éléments de la liste pour le menu soient float: none. C'est à propos de ma compréhension de ce que vous aimeriez faire de votre JavaScript.

Les requêtes de média constituent l'une des bases de Responsive Web Design.