Reputation: 2056
I wish to prevent a series of animations from taking place in smartphones and tablets. The most simple solution I can think of is to simply move these animations CSS into a separate style sheet and somehow prevent this style sheet from loading in all smartphones and tablets.
How can I achieve this?
UPDATE:
Upvotes: 1
Views: 153
Reputation: 584
You can use media queries in your css http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
E.G:
@media only screen and (max-width:991px){
/*insert here all the css you want to be load ONLY on devices below 991px*/
}
If you want to divide your CSS in two sheets then you can set this in your <head>
tag:
<link href="exmaple.css" media="(min-width: 991px)" rel="stylesheet" type="text/css" />
EDIT:
In your case, an option is to set a media query like this one:
@media only screen and (min-width:1200px){
/*insert here those CSS animations.*/
/*they will only take effect on devices above 1200px*/
}
Of course you can set any resolution and use min-width and max-width as you want.
Upvotes: 3
Reputation: 17952
You could wrap the offending CSS in a media query excluding small devices.
Upvotes: 1