Question

我正在使用window.matchMedia条件，以避免在移动设备中注入视频。 Here它说自从Safari 9（我正在测试它）之后，matchMedia将顺利运行，但我的代码完全被忽略了：

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

问题在于格式化，奇怪的是其他浏览器修复了行为，即使它格式不正确。在1025px之后，它缺少一个额外的结束“）括号。尝试：

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

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

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}

Answer 2

在我的情况下，是Safari在mediaQueryList上使用.addListener()而不是addEventListener()。

Answer 3

如果有人也偶然发现此问题，那么我的问题是，该Safari在MediaQueryList接口上没有.onchange属性。 Safari 14刚刚解决了这一问题，但是该版本是相当新的，因此，如果要确保向后兼容，请使用（不推荐使用）.addListener。

来源：https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange

Answer 4

对于可能遇到类似问题的其他人，我发现在野生动物园中，您需要包括“屏幕和”以及宽度设置。其他浏览器似乎假定您在谈论屏幕宽度，但Safari需要指定它，至少就我而言。所以会是这样的：

如果（window.matchMedia（'screen and（min-width：1025px）'）。matches）{}

在这种情况下

Safari忽略window.matchMedia

4 个答案: