Discussion on: Media queries in JS

[RVxLab]

// Register event listener
mediaQuery.addListener(handleWindowChange)

Mind you that MediaQueryList.addListener is deprecated, MediaQueryList extends from EventTarget so you can use addEventListener instead.

Notable exception being Safari 13 and earlier, which doesn't do this.

The ideal solution is to check for addEventListener and fall back to addListener when it's not available:

const mediaQuery = window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    doResponsiveThings();
  }
}

// Register event listener
if (mediaQuery.addEventListener) {
  mediaQuery.addEventListener('change', handleWindowChange);
} else {
  mediaQuery.addListener(handleWindowChange);
}

// Initial check
handleWindowChange(mediaQuery);

[Dannyvpz]

Thanks for the update solution!