11

我正在使用 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 上完美运行。

有没有人有类似的问题？

4

4 回答 4

16

问题出在格式上，奇怪的是其他浏览器会修复该行为，即使它格式错误。它在 1025px 之后缺少一个额外的结束“）”括号。尝试：

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

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

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}
于 2016-03-23T21:17:08.660 回答
8

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

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

在这种情况下

于 2018-12-15T00:17:51.717 回答
4

就我而言，这是 Safari 使用.addListener()而不是addEventListener()在 mediaQueryList 上。

于 2020-05-26T16:10:43.553 回答
3

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

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

于 2020-11-11T08:35:24.193 回答