Question

我已经为这个问题找到了无数解决方案，但没有一个解决了我的问题。我非常简单地拥有一个导航栏，当在移动浏览器中使用时，该导航栏会消失并被按钮取代，该按钮的功能是显示和隐藏导航栏。

现在，我希望我的听众在窗口缩小时显示按钮并隐藏导航栏。扩展窗口时，应隐藏该按钮，并显示导航栏。该按钮可以正常工作，因为媒体查询不会影响该按钮。除了重新加载页面时，我的侦听器似乎根本没有运行。

我的脚本包含在我所有页面开头的PHP标头中。这就是我所拥有的：

媒体查询监听器（包含在header.php代码中）

// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
    var content = document.getElementById("navigation");
    if (inputQuery.matches) {
        // it matches
        content.style.display = "none";
    } else {
        // it does not match
        content.style.display = "block";
    }
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag

元素#navigation是一个包含导航栏的div元素。如有必要，我将提供其他任何相关代码。

Answer 1

使用addListener代替addEventListener解决了该问题。

Answer 2

对于需要其他解决方案的人：
您可以使用此功能：

function getWidth() {
  var maxWidth = Math.max(
        document.body.scrollWidth,
        document.documentElement.scrollWidth,
        document.body.offsetWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
   );
   console.log(maxWidth); // for testing only
   if(maxWidth === 776){
       //do sth
   }
   if(maxWidth === 992){
       //do sth
   }
   return maxWidth;
}
window.addEventListener("resize", getWidth);

现在您一直拥有屏幕的宽度
这只是做事的另一种方式...您可能想使用符合您目的的任何东西。

Answer 3

调整窗口大小时，您必须每次检查一次。

window.addEventListener('resize', function(){
  mediaQueryCheck(mobileQuery);
});

JavaScript-不触发window.matchMedia的事件监听器

3 个答案: