Safari игнорировать window.matchMedia

Question

Я использую условное окно window.matchMedia, чтобы избежать вставки видео в мобильные устройства. Здесь говорится, что matchMedia будет работать гладко начиная с Safari 9 (я тестирую его), но мой код полностью игнорируется:

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

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

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}

Этот код прекрасно работает на Chrome, Chromium, Firefox, IE и Edge.

У кого-нибудь была похожая проблема?

Answer 1

Проблема заключается в форматировании, как ни странно, другие браузеры исправляют поведение, даже если оно искажено. После 1025 пикселей отсутствует дополнительная закрывающая скобка ")". Пытаться:

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

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

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}

Answer 2

Для тех, кто может столкнуться с подобными проблемами, я обнаружил, что в сафари вам нужно включить "экран" и настройку ширины. Другие браузеры, похоже, предполагают, что вы говорите о ширине экрана, но сафари требует ее указания, по крайней мере, в моем случае. так было бы что-то вроде:

if (window.matchMedia ('screen and (min-width: 1025px)'). соответствует) {}

в этом случае

Answer 3

Если кто-то наткнется и на это, в моем случае проблема была в том, что у этого сафари нет .onchangeсвойство в интерфейсе MediaQueryList. Это было решено только в Safari 14, но выпуск довольно новый, поэтому используйте (устаревший) .addListener если вы хотите обеспечить обратную совместимость.

Источник: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange

Answer 4

В моем случае это было то, что Safari использует .addListener() вместо того addEventListener() в mediaQueryList.