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 中您需要包括“屏幕和”以及宽度设置。其他浏览器似乎假设您正在谈论屏幕宽度，但 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

Answer 5

答案就在表面上 - 如果简单的 max\min-width 不起作用，你可以使用类似这样的东西

window.matchMedia('not all and (min-resolution:.001dpcm), (width <= 992px)')

，这对我有用（iPhone 13，iOS 15.1.1）。

我认为 ('hover:none') 也可能有效。