JavaScript 测试 CSS 样式表是否应用了 CSS3 媒体查询

Question

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 1

You can do the following.

1. Make a div which has a display: none; in the first stylesheet, so it is not shown.
2. In the second stylesheet you will add a position: absolute
3. In your Javascript you check if( $("#thediv").css("position") == "absolute")

The position: absolute; is only applied in the second stylesheet.

Answer 2

You could try

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

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

Answer 3

Here is an example as to how you can try to detect the " real " width of the browser window: detect window width and compensate for scrollbars - Javascript

Answer 4

There is a problem with what you are attempting.

If a user is browsing the page while resizing the window below 800px in width then, he will get the mobile version of the page and later when he/she maximizes, he will still get the mobile version.

So, relying on screen width are not a reliable method as the screen resolution of the mobiles are growing significantly nowadays.

Your best shot is to read the User Agent information of the browser, which will easily reveal whether it is a mobile browser or other and load the css files according to it. Then for the variable screen resolution, you can use your current techniques to load width specific codes.