Почему не работает window.onresize? (javascript/jquery)

Question

Я пытаюсь, чтобы этот сайт показывал вкладку на больших экранах, но просто обычный макет на меньших экранах. Вот что у меня есть: обработчик события

function adapt() { 
if(document.documentElement.clientWidth > 800) { 

    $(document).ready(function() { 

     $(".box").hide(); 
     $(".box:first").show(); 

     $("ul.tabs li").click(function() { 
      $("ul.tabs li").removeClass("active"); 
      $(this).addClass("active"); 
      $(".box").hide(); 
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).show(); 
     }); 
    }); 

}else{ 
    $(document).ready(function() { 
     $('.box').show(); 
    }); 
};} 

window.onload = adapt(); 
window.onresize = adapt(); 

OnLoad работает, поэтому функция JQuery вкладки-бокс работает только при загрузке на экране большего размера страницы, и это показывает все содержимое при загрузке на небольшом экране. Я добавил событие onresize, чтобы оно также изменилось, когда окно браузера сократилось, но оно не работает. Если я загружаюсь на большой экран, а затем уменьшаю его, все, что отображается, это содержимое, которое было на первой вкладке, и если я загружаюсь на маленький экран, а затем увеличиваю окно, отображается весь контент и кнопки вкладок не работают. Я просто неверно истолковал, как работает window.resize?

Я предполагаю, что, возможно, событие срабатывает только при первом изменении размера, и если разницы недостаточно для того, чтобы мое другое условие было захвачено, этого не происходит. Если это так, есть ли способ постоянно проверять размер экрана, например, с помощью мультимедийных запросов CSS?

Answer 1

Вы должны вызвать ссылку, не выполнить функцию

window.onload = adapt; 
window.onresize = adapt; 

Потому что, когда вы делаете

window.onload = adapt(); 
window.onresize = adapt(); 

Вы выполнить адаптацию() и так как он не возвращать ничего, вам ничего не сделали на них события

Answer 2

Вы можете попробовать с JQuery:

$(document).ready(function() { 
    adapt(); // onload 
    $(window).resize(adapt()); // resize 
}); 

Answer 3

не забывайте, что если какой-либо другой код в вашем проекте также использует window.onresize или window.onload - ваш код будет переписан

это лучшая практика для использования addEventListener функцию

window.addEventListener('resize', adapt);