44 posts
  • 1 Year of Membership
  • Exclusive Author
  • France
Potae
says

Hello. I saw that many of you (in html templates) choose to disable css3 animations on mobile devices (through js). Is there something I should know? Is it related to performance issues or anything else? Thanks!

By the way. Is this a good way to detect mobile devices?

isMobileDevice = ( ( navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|IEMobile|Opera Mini|Mobi/i) ) || ( $(window).width() < 768 ) ? true : false );

Or is it enough to use /Mobi and width? Or msMaxTouchPoints and /Mobi ?

PS: I saw some templates that disabled parallax backgrounds on mobile devices as well. I do not have much experience with mobile devices and what is good and what is not.

1149 posts
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
  • Collector Level 2
+3 more
fillerspace
says

I would avoid doing browser sniffing through user agent, because it is unreliable and hard to maintain. Users can change the user agent value for various reasons, which may lead to unexpected behavior. You could use the window width as a good approximation, and you could use media queries so you don’t need JS.

25 posts
  • Trendsetter
  • Elite Author
  • Author Level 7
  • Exclusive Author
+5 more
audemedia
says

or you can use conditionizr

http://conditionizr.com/
44 posts
  • 1 Year of Membership
  • Exclusive Author
  • France
Potae
says

Hmm, ok. And what about animations and parallax backgrounds on mobile devices? Should I disable them?

1149 posts
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
  • Collector Level 2
+3 more
fillerspace
says

Hmm, ok. And what about animations and parallax backgrounds on mobile devices? Should I disable them?

They should be disabled on all browsers and platforms! :evilgrin:

757 posts
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 9
+9 more
theAlThemist
says

I am using modernizr and scripts which are not recommended to use on touch devices (like parallax for example) I am calling with $(“body.no-touch #your_selector”).your_script(); etc.

44 posts
  • 1 Year of Membership
  • Exclusive Author
  • France
Potae
says

I am using modernizr and scripts which are not recommended to use on touch devices (like parallax for example) I am calling with $(“body.no-touch #your_selector”).your_script(); etc.

Ok, so you’re not using animations or parallax on mobile devices, and I like your method. But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!

1149 posts
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
  • Collector Level 2
+3 more
fillerspace
says

But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!

Animations are OK on the latest smartphone and tablet models, but older or cheaper models have poor performance with lots of animation. Since you can’t really target new vs old devices, better to disable all animation for mobile.

44 posts
  • 1 Year of Membership
  • Exclusive Author
  • France
Potae
says


But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!
Animations are OK on the latest smartphone and tablet models, but older or cheaper models have poor performance with lots of animation. Since you can’t really target new vs old devices, better to disable all animation for mobile.

Thank you fellow. That’s what I wanted to know.

by
by
by
by
by
by