Safari忽略window.matchMedia

Question

为了避免在移动设备中注入视频，我使用了window.matchMedia条件。CanIUse报告说，matchMedia将在Safari 9之后顺利工作(我正在对其进行测试)，但是我的代码被完全忽略了：

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

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

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}

这段代码在Chrome、Chrome、Firefox、IE和Edge上运行得很好。

有谁有过类似的问题吗？

Answer 1

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

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

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

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}

Answer 2

对于其他可能遇到类似问题的人，我发现在safari中，您需要包括“screen and”以及宽度设置。其他浏览器似乎假设您讨论的是屏幕宽度，但safari需要指定它，至少在我的情况下是这样。所以应该是这样的：

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

在这种情况下

Answer 3

在我的例子中，Safari使用的是.addListener()，而不是mediaQueryList上的addEventListener()。