1

I have html page that loads different css, depending on screen width (targeting pc, tablets and phones):

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="css/desktop-style.css" > 
<link rel="stylesheet" type="text/css" media="screen and (min-width: 769px) and (max-width: 1199px)" href="css/tablet-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 100px) and (max-width: 768px)" href="css/phone-style.css" >

I heavily depend on jQuery, and functions should be chosen depending on active css. Is there a way in JavaScript of jQuery to determinate which css is active? Or should I use jQuery to determinate browser width, and make further functions depending on width output? Thank you.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Goran Mitić
  • 33
  • 5
  • for media queries , it alway based on you screen width ...so based on width of your screen it will pick up that css ...so you can just try to change browswer width to check it ... – Pranay Rana Dec 04 '17 at 12:40
  • Why does it matter what one is active? Can't you just read the width in JavaScript? – epascarello Dec 04 '17 at 12:45
  • The question is a bit strange. Usually you want css to load first, and you defer the loading of jQuery. You want the opposite. No, I would just load the css from the start. You can use media queries. You can set a class to the whole page, that can be changed with jQuery, ... – Emmanuel Delay Dec 04 '17 at 12:46
  • It might have been my English, I do have css load first, and js at the end of file. I have four divs, on PC they should be in one row, on tablet in two rows and on phone each div has max width, so four rows with one div. Based on that and on resize function, I make divs same height (for pc and tablet) and than additional animate functions. I just thought that there is some way to determinate which css is active, so I can base my functions on. From what I gathered from your responses, it is not feasable, I should rather use js to determinate window width. Thank you for your time and input. – Goran Mitić Dec 05 '17 at 06:25

3 Answers3

0

You can check if this thread helps.

You can also think of using media queries inside a css file and load the same file for different screen variants.

sSD
  • 282
  • 2
  • 17
0

I recommend you to use media query but if you want a JavaScript solution, can do this with jQuery like this:

var window = $(window).width();
var css = $('#css');

if(window > 100 && window < 768){
  css.attr('href','css/desktop-style.css')
} else if(window > 769 && window < 1199){
  css.attr('href','css/tablet-style.css')
} else if(window > 1200){
  css.attr('href','css/phone-style.css')
}
<link id="css" rel="stylesheet" type="text/css" href="css/style.css" >

Note: You can change resolutions as you want, I'm not sure it's correct for detect mobile tablet or etc.

Warning: Be aware! this method a little bad for SEO things, google and etc not read your responsive styles.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Pedram
  • 15,766
  • 10
  • 44
  • 73
  • hey pedram, I did look at media query, but I did not (yet) get the grasp of it. I guess your suggestion is the one i will go with, as I mentioned in my original question, I was wondering if there is a function to determinate which css is active, or should I get width with js. Seems later is the way to go. Thank you. – Goran Mitić Dec 05 '17 at 06:29
0

It is probably wiser to check the widh of the device. But I think you could figure out which css is used, by this little 'hack'. In each css you give a nonsense property to a hidden element.

In the example I gave #canary the animation name first-css.

In a different css file you could write 

#canary {animation-name: second-css; display: none}

You could give a unique property to a certain element in each css file. JQuery could check that property. 

$(function() {
whichcss=$("#canary").css("animation-name");
$("#output").text(whichcss);
})
#canary {animation-name: first-css; display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="canary"></p>
<p id="output"></p>

To be extra clear. In your css files you should include th name of the css file in this way:

in desktop-style.css: 

#canary {animation-name: desktop-css; display: none}

in tablet-style.css: 

#canary {animation-name: tablet-css; display: none}

in phone-style.css: 

#canary {animation-name: phone-css; display: none}
Hans Dash
  • 761
  • 4
  • 18
  • Hey Hans, "canary" is actually a good way to determinate which css is loaded, thank you for idea. – Goran Mitić Dec 05 '17 at 06:26
  • Hi Goran, you're welcome. Do you think it would be good enough to accept it as the answer? ;-) – Hans Dash Dec 05 '17 at 17:21
  • Hey Hans, hello, I upvoted, but I got warning that I do not have enough of some points. As for the right answer, I did not get it, since what I was asking is not doable. In my question I had a fallback to jquery, and that is the way i went. Your answer is really good idea, but not applicable for my problem. Again, thank you for your time and input. – Goran Mitić Dec 06 '17 at 18:43
  • Ah, thanks. No problem. Just out of curiosity: how is the '#canary' not the solution here? You cannot access the css files to put in the style for the #canary? – Hans Dash Dec 06 '17 at 18:48
  • Hello Hans, it might be my English, but as I understood, what I want is not possible, it needs workaround, yours is not bad at all, but I went with my original question, to fallback on jquery and width()... – Goran Mitić Dec 07 '17 at 19:37
  • It is not you English. It is me being stubborn :-) To be serious: I understood your question being (in essence) How can I use (javascript or) jquery to determine which css is being used? I made a little proof of concept to show you can insert some sort of identifier in a css file, that you can read in jQuery. Maybe the other solutions are more practical but I think I proved it _can_ be done. – Hans Dash Dec 09 '17 at 08:40