Safari Ignore Window.matchmedia

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 testin

Solution 1:

The issue is in the formatting, oddly enough the other browsers fix the behavior even though it is malformed. It's missing an additional closing ")" parenthesis after the 1025px. Try:

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

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

   functioninitialiseMediaPlayer() {

      (stuff here...)

   }

}

Solution 2:

For anyone else who may come across similar issues, I found that in safari you need to include 'screen and' as well as the width setting. Other browsers seem to assume that you are talking about the screen width but safari needs it specified, at least in my case. so would be something like:

if ( window.matchMedia('screen and (min-width:1025px)').matches) {}

in this case

Solution 3:

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

Solution 4:

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