2

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?

Craig Francis
  • 1,855
  • 3
  • 22
  • 35

4 Answers4

3

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.

Niels
  • 48,601
  • 4
  • 62
  • 81
  • Have tried it, but as the then – Craig Francis Nov 20 '11 at 11:12
  • Thanks Niels, ($('html').css('text-align') == 'center') works with a html { text-align: center; }... and this can be applied before DOM load :-). – Craig Francis Nov 20 '11 at 11:27
1

You could try

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

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

EoghanM
  • 25,161
  • 23
  • 90
  • 123
0

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

Community
  • 1
  • 1
Yes Barry
  • 9,514
  • 5
  • 50
  • 69
  • THanks mmmshuddup, window.innerWidth also works... but I fear that because it is two separate tests (the browsers idea of CSS3 min-width: 800px may change), then it doesn't ensure that the two will always be the same. – Craig Francis Nov 20 '11 at 11:30
0

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.

Starx
  • 77,474
  • 47
  • 185
  • 261
  • Hi Starx, actually this is the effect I'm hoping for... I have a design where the form layout has a label above the form input field, this makes a good column layout, but very difficult to use when that form becomes long on a wider screen (where the label can be to the left of the input field)... and there are some other changes I'm making (such as hiding the site navigation with JS). – Craig Francis Nov 20 '11 at 11:33
  • Should also note, I'm re-running the test on $(window).resize(update_page_layout); – Craig Francis Nov 20 '11 at 11:34