Safari浏览器中用于matchMedia的addEventListener

Question

我没有带safari浏览器的iOS，所以我无法正确测试它。

下面是我的代码：

if (window && window.matchMedia('(prefers-color-scheme: dark)')) {
        window.matchMedia('(prefers-color-scheme: dark)')
          .addEventListener('change', (mediaQuery) => {
            console.log('theme', mediaQuery);
            // ....
          });
      }

使用该代码，我得到了错误(在在线测试工具中)：window.matchMedia('(prefers-color-scheme: dark)').addEventListener is not a function

如何修复它？

Answer 1

规范中只提到了addListener (https://drafts.csswg.org/cssom-view/#the-mediaquerylist-interface)，这也是safari包含的唯一函数。

这也有最广泛的支持，见https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener。

所以你可能会变成：

if (window && window.matchMedia('(prefers-color-scheme: dark)')) {
        window.matchMedia('(prefers-color-scheme: dark)')
          .addListener((mediaQuery) => {
            console.log('theme', mediaQuery);
            // ....
          });
      }