0

I am using @media queries in css for responsive design. I only need one breakpoint.

How do I use javascript to detect which state the page is in at any given moment (ideally even when resizing a window)?

Based on the state (eg. below 640px width or over), I would like to run a different js function.

Thank you

Wasteland
  • 4,889
  • 14
  • 45
  • 91

2 Answers2

1

With your breakpoint at 640px you could use the following code to execute different functions depending on the current view.

function executeMqDependentCode() {
    var mq = window.matchMedia( "(min-width: 640px)" );
    if (mq.matches) {
        // code for wide screens
    }
    else {
        // code for smaller screens
    }
}

If you want to have the code be executed when the user resizes his window, add an event listener:

window.onresize = executeMqDependentCode;
Tatellos
  • 11
  • 2
0
if($(window).width() >= 1024){
  // do your stuff
}

You can use jQuery with the above code! Refer here

Community
  • 1
  • 1
hemnath mouli
  • 2,617
  • 2
  • 17
  • 35