It can be quite common when working with web apps to need to use Javascript to check for window resizes.

The typical way is to use an event listener on window's resize event, such as:

function checkForWindowResize() {
    console.log(`Screen width: ${window.innerWidth}`);

    if (window.innerWidth < 600) {
       doSomethingForSmallScreens();
    }
    else {
       doSomethingForLargeScreens();
    }
}

window.addEventListener('resize', checkForWindowResize);

However, this will mean that the checkForWindowResize function will fire every time the window is resized, at every pixel increment/decrement.

This can have huge performance issues if the event listener function is slow to run.

It is quite common that you don't need all of those events - you only care if it was resized smaller or larger than a certain size.

In those cases there is a nicer alternative where you can use css media query breakpoints. This won't be suitable for all uses of adding an event listener to the resize event, but it is very useful in many situations.

window.matchMedia() to the rescue

You can use matchMedia and attach an event listener to it. Unlike the above example (which would fire the listener at every change in window resize), matchMedia is used with a CSS media query and the event listener is fired only every time it passes that breakpoint.

Here is a full example:

const mediaQuery = '(max-width: 700px)';
const mediaQueryList = window.matchMedia(mediaQuery);

mediaQueryList.addEventListener('change', event => {
    console.log(window.innerWidth);
  if (event.matches) {
    console.log('The window is now 700px or under');
  } else {
    console.log('The window is now over 700px');
  }
})

This media query list event listener is ideal if you only care when the window is resized smaller or larger than a specific size.

I wasn't aware of matchMedia until someone pointed it out quite recently. It is much nicer than listening for any resize event.

You can use the event.matches boolean to work out if it matched the media query or not.

Examples of matchMedia

Click these links to see them in action. View their HTML source to see some easy to read code of using matchMedia.

• Using matchMedia to update when the window goes over/under 700px
• Using an event listener on the resize event to update at every window change

You can also use window.matchMedia() without event listeners

You can also use matchMedia without the event listeners to see if the window currently matches a query string:

const mediaQueryList = window.matchMedia('(max-width: 600px)');

if(mediaQueryList.matches) {
  console.log('Window is max 600px');
}
else {
  console.log('Window is over 600px');
}

Types of media queries you can use

• window.matchMedia('(orientation: portrait)')
• window.matchMedia('(min-width: 700px)')
• window.matchMedia('screen and (max-width: 700px)')
• window.matchMedia('screen and (max-device-width: 700px) and (orientation: portrait)')
• etc.

Some important notes

• You can also use event.media to get the media query string.
• My examples use MediaQueryList.addEventListener(). For better backwards compatibility you should use addListener (see here), since MediaQueryList only inherits from EventTarget in newer browsers.
• Don't forget about mediaQueryList.removeEventListener() to clean up once you no longer need this event.
• See more at MDN