David Martins
David Martins

Reputation: 2056

How to prevent a style sheet from loading in mobile devices

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:

  1. Please, no Media Queries addressing the screen width (this is far from precise, as some tablets are as wide as some laptops).
  2. Addressing touch devices would be a solution I could live with although not perfect as some laptops have this feature.
  3. Ideal solution, I think, would be to address mobile Browsers and Operating Systems.

Upvotes: 1

Views: 153

Answers (2)

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

Alex McMillan
Alex McMillan

Reputation: 17952

You could wrap the offending CSS in a media query excluding small devices.

Upvotes: 1

Related Questions