javascript - detect which view? [duplicate]

Question

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

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

Answer 2

if($(window).width() >= 1024){
  // do your stuff
}

You can use jQuery with the above code! Refer here