disable css animation on mobile devices

Question

I am working on a horizontal scrolling site and to add to it it has a couple of CSS animations that totally crash all the browsers on the ipad i am testing on, so I am wondering if there is a way for the code to detect mobile devices (iOs, Android..) over and above screen sizes, to just disable animation for it?

Thanks for all your help in advance.

I haven't attached any code to it because, I really do not know what I would use to detect the Os, I am aware of using media queries but as I said window size is not what I am looking for its the Mobile OS that I want to target.

score 2 · Answer 1 · edited May 23 '17 at 12:11

You can use the navigator.platform property to check the device type, then use some javascript to add the stylesheet containing your CSS animations if it's not one of the excluded platforms.

For example, to load the animations for all devices besides iPads, you could do:

if(navigator.platform != 'iPad')
{
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'animations.css';
    document.getElementsByTagName('head')[0].appendChild(link);
}

For a list of platform values, refer here:
What is the list of possible values for navigator.platform as of today?

For more info on loading a stylesheet with JS, look here:
How to load up CSS files using Javascript?

disable css animation on mobile devices

1 Answers1