时间戳

首页 > 解决方案 > Safari 浏览器中 matchMedia 的 addEventListener

javascript - Safari 浏览器中 matchMedia 的 addEventListener

问题描述

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

这是我的代码：

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

如何解决？

标签： javascriptsafari

解决方案

该规范仅提及addListener（https: //drafts.c​​sswg.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);
            // ....
          });
      }

推荐阅读