JavaScript test if a CSS stylesheet is applied with CSS3 media query

I have two style sheets:

<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />

The second one should only be loaded when the window is 800px or wider (narrower displays get a layout more appropriate for mobile devices).

The JavaScript needs to know if that second style sheet is being applied, I have tried the jQuery:

($(window).width() > 800)

But when you get around the 790 – 810px width, Chrome/Firefox (and probably others) will return a value such as 791, and the 800px+ style sheet will still be loaded.

I suspect it’s due to the scroll bar (but targeting the $(document) or $(‘html’) either doesn’t work, or are the same).

So is there a way to test if $(‘#css-desktop’) is enabled/active/used?

Answer

You could try

window.matchMedia(document.getElementById('css-desktop').getAttribute('media')).matches;

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia