Coarse pointer

 I now turn on my animations if there is a wide screen and not a 'coarse' pointer'. I used to check the 'user agent string' for 'Mobi', 'Android' or 'iPad' etc

A 'coarse' pointer is a finger on a mobile or tablet.

I also check for 'prefers-reduced-motion' and 'prefers-contrast'.

I also check 'userAgentData.mobile' on Chrome.

I am going to check the screen size using a media query as well.

My media query for mobiles in my CSS is now:

    @media (max-width: 699px), (pointer: coarse) 

The comma in the media query above means 'or'. In the above, I am trying to include mobiles or tablets with wide screens

There are more tips at: bbingo.xyz/t