Почему на мобильных устройствах не работает смена классов JQuery?

Question

[Никита Каргин]

<header>

  <div class="wrapper">
  	<div id="header">
  	 <nav id="header-1" style="background-color: #FFFFFF;height:100px;display: flex;width: 100vw;">
    <img src="https://family-goodok.ucoz.net/2-1-.png" width="100" height="100"><ul
id = "menu-ul" class="ul-header-active">

        <li style="
    margin-right: 60px;
"><a href="https://www.familygoodok.ru/index/interesno-i-besplatno/0-8">Бесплатная экспресс консультация</a></li>
<li style="
    margin-right: 60px;
"><a href="https://www.familygoodok.ru/index/zapis-na-onlajn-konsultaciju-psikhologa/0-4">Запись на онлайн-консультацию</a></li>
    <li style="
    margin-right: 60px;
"><a href="https://www.familygoodok.ru/index/personalnaja-programma-psikhologicheskoj-podderzhki/0-9">Персональная программа</a></li>
</ul>
<img src="https://family-goodok.ucoz.net/slider.png" width="50" height="50" class="slider-unactive" id="slider"/>
</nav>
  	 </div>
     <h1>КОНСУЛЬТАЦИИ ОНЛАЙН</h1>
  </div>
  <script>
if ($(window).width()<=720) {
  alert("Low width");
  $('#menu-ul').removeClass();
  $('#menu-ul').addClass("ul-header-unactive");
}
</script>
</header>

- это фрагмент html

.ul-header-active {
  margin-top: 40px;
  margin-bottom: 40px;
  font-family: century gothic;
  display: inline-flex;
  list-style:none;
  margin-left: 50px;
  margin-right: 50px;
  font-size: medium;}

.ul-header-unactive{
  display:none;
}

.slider-unactive{
  display:none;
}

.slider-active{
  margin-top: 25px;
}

- это фрагмент CSS

На компьютерах все работает как надо, в том числе с помощью эмуляции смартфона в консоли разработчика.

Когда я захожу с мобильного, происходит дичь. На Samsung Internet показывается сообщение Low Width, то есть скрипт начинает выполняться. Далее видно, что класс у menu-ul сбрасывается т.к. теряется формат. Но почему-то не происходит добавления класса ul-header-unactive.
Как так? Повторю, на компьютере все работает нормально.