检测屏幕分辨率的变化，并在 javascript 中执行代码或其他代码

Question

我有这个疑问，我有一个菜单，我在其中运行 javascript 代码或其他代码，具体取决于它的宽度是大于还是小于它的高度，第一次检测到屏幕分辨率时效果很好，但如果有变化分辨率或方向变化不会检测到它，尽管例如已更改为纵向，但仍执行横向代码。 有没有办法解决这个问题？ 问候

Answer 1

您可以使用事件侦听器并侦听resize事件。

window.addEventListener('resize', () => {
    // function body
});

但我认为这是一个样式问题，您应该考虑使用不同的方法。

Answer 2

这是@mstruebing 答案的延伸：

function resisePageMobile(){

  if (window.innerWidth <= 696) { //Detect mobile 
    aside.classList.remove('pc-stuff');
    aside.classList.add('mobile-stuff');
  }else{ //Detect other higher resolution screens
    aside.classList.remove('mobile-stuff');
    aside.classList.add('pc-stuff');
  }

}
resisePageMobile();//run once on page load

//then attach to the event listener
window.addEventListener('resize',resisePageMobile);

在页面开头运行此 function 很重要，因为在 window 调整大小之前不会触发调整大小事件，因此我们必须在开始时初始化页面！