您忽略 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、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 中您需要包括 'screen and' 以及宽度设置。其他浏览器似乎假设你在谈论屏幕宽度，但 safari 需要指定它，至少在我的情况下。所以会是这样的：

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

在这种情况下

Answer 3

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

Answer 4

如果有人也偶然发现了这个问题，在我的情况下，问题是 safari 在 MediaQueryList 界面上没有 .onchange 属性。这刚刚在 Safari 14 中得到解决，但该版本相当新，因此如果您想确保向后兼容性，请使用（已弃用）.addListener。

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

您忽略 Safari window.matchMedia

Safari ignores window.matchMedia

javascript

safari

media-queries

matchmedia