Javascript 为什么我的导航栏在移动页面加载时不会崩溃

我试图在手机上折叠导航栏，但导航栏只有在我手动调整选项卡大小时才会折叠。因此，这可能与启动网站时不检查屏幕大小有关。我已经用addeventlisteners尝试了一些东西，但我只是不断地得到错误，因为操作了意外的标记。我最初的代码是：

function openNav() {
  document.getElementById("mySidebar").style.width = "190px";
  document.getElementById("main").style.marginLeft = "190px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}





var x = window.matchMedia("(max-width: 600px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes


function myFunction(x) {
  if (x.matches) { // If media query matches
      
      closeNav()
    
  }
    
  
}

在向一些人寻求帮助后，我最终开始胡闹：

var x = window.matchMedia("(max-width: 600px)")
x.addEventListener("change", () => {
    myFunction(x);
});

及

---

我已经醒了好几个小时了，我知道这可能是件愚蠢的事情。

你可以使用CSS@media查询代替JavaScript，比如：

@仅媒体屏幕和（最小宽度：0px）和（最大宽度：767px） { “你的风格在这里” }

@仅媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）和（方向：纵向） { “用于平板电脑纵向视图” }

@仅媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）和（方向：横向） { “平板电脑视图景观” }

另外，请不要忘记在页面部分添加视口元标记

meta name=“viewport”content=“宽度=设备宽度，初始比例=1，最小比例=1，最大比例=3”

（将上述元标记保留在内部）

---

view port meta标记将读取您的浏览器大小调整，您可以实现响应web布局、以特定设备大小显示和隐藏元素等功能。

您可以使用CSS@media查询代替JavaScript，如：

@仅媒体屏幕和（最小宽度：0px）和（最大宽度：767px） { “你的风格在这里” }

@仅媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）和（方向：纵向） { “用于平板电脑纵向视图” }

@仅媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）和（方向：横向） { “平板电脑视图景观” }

另外，请不要忘记在页面部分添加视口元标记

meta name=“viewport”content=“宽度=设备宽度，初始比例=1，最小比例=1，最大比例=3”

（将上述元标记保留在内部）

---

view port meta标记将读取您的浏览器大小调整，您可以实现响应web布局、以特定设备大小显示和隐藏元素等功能。

很明显，它将不起作用，因为您已将事件侦听器添加到窗口的大小调整中。在移动设备中，实际上不可能调整/更改窗口大小，因此您的javascript代码无法执行。您需要对此进行媒体查询。我建议你放弃这个js想法，改用媒体查询。这里是指向媒体查询文档的链接：很明显，它将不起作用，因为您已在窗口中添加了事件侦听器。在移动设备中，实际上不可能调整/更改窗口大小，因此您的javascript代码无法执行。您需要对此进行媒体查询。我建议你放弃这个js想法，改用媒体查询。这里是媒体查询文档的链接：是的，但是我正在尝试折叠导航栏，所以我需要使用javascript。我猜你没有使用任何像bootstrap这样的UI框架。据我所知，您在桌面上有一个完全打开的导航菜单，当它在手机上打开或调整浏览器大小时，它应该折叠并成为手机菜单？JS无法在浏览器调整大小时自动刷新，除非您刷新使用JS时出现问题的页面。还可以尝试使用modernizr.js，通过它可以编写js媒体查询，比如js样式的css。记住JS查询不会在调整大小时执行，只有CSS会。是的，但我正在尝试折叠导航栏，所以我需要使用javascript。我想你没有使用任何像bootstrap这样的UI框架。据我所知，您在桌面上有一个完全打开的导航菜单，当它在手机上打开或调整浏览器大小时，它应该折叠并成为手机菜单？JS无法在浏览器调整大小时自动刷新，除非您刷新使用JS时出现问题的页面。还可以尝试使用modernizr.js，通过它可以编写js媒体查询，比如js样式的css。记住JS查询不会在调整大小时执行，只有CSS会执行。

 window.addEventListener('resize', ()=>{
 var x = window.matchMedia("(max-width: 600px)")
 if (x.matches) { // If media query matches 
  closeNav() 
 }
 });