How to run javascript file only on certain media query?

Question

on my website i have an p5.js sketch displayed in the background. the sketch is linked in an seperate file in the head section of my html file. the problem is, that i have a second sketch only for the mobile media query of the website. therefore i tried to add following if statement around my sketch in the file:

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

somehow thats not working for safari browser...

is there an other way to hide a script file on a website?

Does this answer your question? [Is there a javascript equivalent to using @media query?](https://stackoverflow.com/questions/31511001/is-there-a-javascript-equivalent-to-using-media-query) — s.kuznetsov, May 01 '21 at 20:35

score 0 · Answer 1 · answered May 01 '21 at 20:32

There is matchMedia method in JavaScript which is also supported almost on all browsers. Here's an example.

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

How to run javascript file only on certain media query?

1 Answers1