Question

I’m looking to detect if a device is a mobile (phone or tablet) or a desktop. I thought of using the mousemove or the mouseenter event so that when this event triggers, I can set a global boolean flag IsDesktop to true.

Is that a good idea or can mouse events also trigger on mobile devices?

Thanks.

Answer 1

You have to realize that there are two separate cases here:

1. Display size: large / small
2. Mouse and/or touch

In the 2nd case you don’t need to do much else, just implement both sets of events. In the 1st case you might want to load an alternative template; one that is more intuitive for small screen (touch) devices. This is the thing you should be checking for.

There isn’t really a way to detect the screen size since pixels are much denser on mobile devices. Looking at the User-Agent string is a good start.

If you’re not worried about screen size and don’t need separate templates then you don’t need to do anything special. Just implement both sets of events.