JavaScript test if a CSS stylesheet is applied with CSS3 media query
Question by Craig Francis
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 by Niels
You can do the following.
- Make a div which has a
display: none;in the first stylesheet, so it is not shown. - In the second stylesheet you will add a
position: absolute - In your Javascript you check
if( $("#thediv").css("position") == "absolute")
The position: absolute; is only applied in the second stylesheet.
Answer by Starx
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.
