如何仅在某些媒体查询上运行 javascript 文件？

Question

在我的网站上，我在后台显示了一个 p5.js 草图。草图链接在我的 html 文件头部的单独文件中。问题是，我有第二个草图仅用于网站的移动媒体查询。因此我尝试在文件中的草图周围添加以下 if 语句：

if (document.documentElement.clientWidth < 600) {
// my p5.js sketch
}

不知何故，这不适用于 safari 浏览器...

还有其他方法可以隐藏网站上的脚本文件吗？

Answer 1

JavaScript 中有matchMedia 方法，几乎​​所有浏览器都支持该方法。这是一个例子。

function checkMedia(media) {
    if (media.matches) {
        // Mobile
    } else {
        // Desktop
    }
}

var m = window.matchMedia('(max-width: 600px)');
checkMedia(m); // Call listener function at run time
m.addListener(checkMedia); // Attach listener function on state changes