Safari ignore window.matchMedia

Question

I'm using window.matchMedia conditional in order to avoid the inject of a video in mobile devices. Here it says that matchMedia is going to work smoothly since Safari 9 (I'm testing on it), but my code is completly ignored:

if ( window.matchMedia("(min-width: 1025px").matches) {
   console.log('match');

   document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}

This code works perfectly on Chrome, Chromium, Firefox, IE and Edge.

Does anyone had a similar issue?

Answer 1

In my case, it was that Safari uses .addListener() instead of addEventListener() on the mediaQueryList.

Answer 2

If someone stumbles across this too, in my case the problem was, that safari doesn't have the .onchange property on the MediaQueryList interface. This was just resolved in Safari 14, but the release is rather new, so use (the deprecated) .addListener if you want to ensure backwards compatibility.

Source: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange