Safari Игнорирование Javascript Media Query

Question

У меня есть навигационная панель, которая открывается на 70 пикселей в высоту выше 643 пикселей в ширину или на 100% ниже ее.Вот javascript:

function openNav() {
  document.getElementById('myNav').style.height = '70px';
  document.getElementById('myNav').style.opacity = '100%';
}

function closeNav() {
  document.getElementById('myNav').style.height = '0%';
  document.getElementById('myNav').style.opacity = '0%';
}
if (screen.width <= 643) {
    function openNav() {
  document.getElementById('myNav').style.height = '100%';
  document.getElementById('myNav').style.opacity = '100%';
}

function closeNav() {
  document.getElementById('myNav').style.height = '0%';
  document.getElementById('myNav').style.opacity = '0%';
}
}

Я знаю, что этот javascript работает нормально, так как он работает в разных браузерах на настольных и мобильных устройствах.Однако в Safari этот медиазапрос игнорируется, и он постоянно открывается на 100% (как на настольных, так и на мобильных устройствах).

Я также пытался использовать window.matchMedia, включая приведенное здесь решение: Safari игнорировать window.matchMedia

У меня не было успеха в том, чтобы заставить это работатьв Safari.

Если вы хотите увидеть его в действии, это сайт, над которым я работаю: https://jh -portfolio-test-2.blogspot.com /