javascript - Safari 忽略 Javascript 媒体查询

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 ignore window.matchMedia

我没有成功让它在 Safari 上运行。

如果您想看到它的实际效果，这是我正在开发的网站：https ://jh-portfolio-test-2.blogspot.com/

标签： javascriptmobilesafarimedia-queriesdesktop