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

Look into the resize event and the orientationchange event. — Mike Cluck
– Mike Cluck, Commented Oct 2, 2017 at 15:36
Already solved, this is the end result: window.onresize = function(){ location.reload(); } — manuhverso
– manuhverso, Commented Oct 2, 2017 at 16:46

mstruebing · Accepted Answer · 2017-10-02 15:37:01Z

4

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.

answered Oct 2, 2017 at 15:37

mstruebing

1,8221 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yasser CHENIK · Accepted Answer · 2022-08-14 23:02:36Z

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 !

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related