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?

Improve this question

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Have tried it, but as the <link> then <script> tag is in the <head>, none of the DOM is ready yet (I would like to know before the DOM load event, as it still seems to cause a flicker as things get applied even with the jQuery $(function() {})... so was wondering if it could be done with a JS test that checked that <link> tag... one thing I haven't tried yet is adding styles to the <html> tag.
Thanks Niels, ($('html').css('text-align') == 'center') works with a html { text-align: center; }... and this can be applied before DOM load :-).
1

You could try

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

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

Improve this answer

1 Comment

Thanks for proving an updated answer, things have changed a bit in the last 10 or so years :-)
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

Improve this answer

1 Comment

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.
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.

Improve this answer

2 Comments

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).
Should also note, I'm re-running the test on $(window).resize(update_page_layout);

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.