detect a change of screen resolution, and execute a code or another in javascript

Question

I have this doubt, I have a menu in which I run a javascript code or another depending on whether its width is greater or less than its height, works me well the first time the screen resolution is detected, but if there is a change of resolution or a change of orientation does not detect it, and despite for example of having changed to portrait orientation still executing the landscape orientation code. Is there any way to solve this? regards

Answer 1

You could use an eventlistener and listen on the resize event.

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

But I think this is rather a styling issue and you should consider to use a different approach.

Answer 2

Here is an extention of @mstruebing 's answer:

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);

Running this function once at the start of the page is important because the resize event will not trigger until the window is getting resized so we must initialize page at the start !