Safari 忽略 window.matchMedia

Posted 2023-02-21

【中文标题】Safari 忽略 window.matchMedia

【英文标题】：Safari ignore window.matchMedia

【发布时间】：2021-09-07 15:06:48

【问题描述】：

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

有人遇到过类似的问题吗？

【参考方案1】：

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

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

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

   function initialiseMediaPlayer() 

      (stuff here...)

   

【讨论】：

不用担心，很高兴知道其他浏览器会修复它而 safari 没有 :)

这是真的！我花了将近一个星期没有注意到丢失的支架！但是我在 chrome 和 Firefox 上进行开发，而那个支架对我来说几乎是不可见的，为什么它在所有环境中都可以工作，而不是在 safari 中；）啊哈哈哈哈不错！！！

这也帮助我找到了我的问题。除了我的测试人员在 iPhone 上使用 Chrome。确实很奇怪。

【参考方案2】：

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

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

在这种情况下

【参考方案3】：

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

【参考方案4】：

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

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