Изменение размера окна jQuery и Google Chrome

Question

Я не могу решить проблему, возникающую при изменении размера меню. Код, который я собираюсь опубликовать, не работает только с Chrome.

Будучи сложной ситуацией, чтобы объяснить словами, я покажу вам несколько скриншотов проблемы.

Это мое меню выглядит на открытии:

При изменении размера окна < = 605px браузера, код JQuery удалить левый плавающий, и поэтому детали помещают в колонку и по центру , (извините, я не могу опубликовать более 2 ссылок)

Когда я изменяю его размер> 605, он должен выглядеть как на первом изображении (и на самом деле он работает на ie и firefox), но на chrome он выглядит следующим образом:

Вот код.

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 (только Полезные вещи):

#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") 
     }     
    }) 

Конечно, я код, чтобы позволить этому произойти, даже если окно не изменяется, но открывается только с шириной < = 605, но это точно так же, как и выше, только без события .resize().

Вы можете помочь мне сделать этот код совместимым с google chrome?

Спасибо, Stefano

Answer 1

В то время как вы могли бы справиться с такого рода вещи с JQuery, было бы гораздо проще добавить media query в свой CSS. Нечто похожее на

/* 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; 
    } 
} 

Это будет работать во всех браузерах без проблем. Что происходит за кулисами здесь: вы говорите браузеру, что вы хотите, чтобы элементы списка для меню были float: left. Но после этого вы добавляете исключение с max-width из 605px, то есть если окно браузера составляет 605 пикселей или меньше, вы действительно хотите, чтобы элементы списка для меню были float: none. Речь идет о моем понимании того, что вы хотели бы сделать своим JavaScript.

Медиа-запросы являются одной из основ для Responsive Web Design.