Переключить видимость меню в зависимости от ширины экрана при перезагрузке страницы

Question

У меня есть <ul> меню со ссылками, и я хочу добавить некоторую функцию, которая переключает видимость меню в зависимости от ширины экрана (то есть оно должно скрывать меню на экранах, меньших 767 пикселей). Я пробовал этот код, который, кажется, работает, когда окно изменено. Но при перезагрузке страницы это не так:

function toggleVisibility(i) {
  window.innerWidth < 767 && (i.style.display = "none")
}

<ul onload="toggleVisibility(this)">
  <li><a href='link1.html'>Item 1</a></li>
  <li><a href='link2.html'>Item 2</a></li>
  <li><a href='link3.html'>Item 3</a></li>
  <li><a href='link4.html'>Item 4</a></li>
  <li><a href='link5.html'>Item 5</a></li>
</ul>

Как мне сделать так, чтобы меню также скрывалось при перезагрузке страницы?

Answer 1

Для этого вам было бы намного лучше использовать медиазапросы CSS. Пример:

/* any CSS declared inside will only apply when the window width is 766 or less */
@media (max-width: 766px)
{
    ul
    {
        display: none;
    }
}