Menu icon Foundation
Use modernizr to detect touch screen

I just foud out that modernizr (used in Foundation 5) adds a "no-touch" class to the html tag if the screen is not a touch screen and adds a "touch" class if the screen is a touch screen.

This is great, because that means you can target for instace an a tag on a non touch screen only and apply a hover state on it, like this:

.no-touch a:hover { color:#f00; }

This must be the best way to detect if the user is using a phone or tablet.

touch screenmodernizrconditionscss

I just foud out that modernizr (used in Foundation 5) adds a "no-touch" class to the html tag if the screen is not a touch screen and adds a "touch" class if the screen is a touch screen.

This is great, because that means you can target for instace an a tag on a non touch screen only and apply a hover state on it, like this:

.no-touch a:hover { color:#f00; }

This must be the best way to detect if the user is using a phone or tablet.

Patrick Kettner over 5 years ago

Hey Robin!
Its a bit more complicated than that. The Modernizr touch check only checks for touch events, not touch screens. There has been a lot of discussion on the github issue tracker for Modernizr (https://github.com/Modernizr/Modernizr/issues/548 is a good example).

Not only that, but touch doesn't cover all mobile devices. Since it is just touch events, windows phones are not detected properly. You would need to also be checking for pointer-events.

The best advice that I can give is to make all of your designs as cross device as possible, and not try to detect a phone or tablet or phablet or anything any between.

Karl Ward over 5 years ago

Although as Patrick points out, it is not bulletproof, it can easily be used to apply non-critical and progressive CSS. The .touch and .no-touch classes will apply correctly on 99% of devices.

I use .no-touch class to apply progressive mouse-hover styles so that they dont apply on touch devices ... If the class does not apply correctly on some vague device, it does not matter to any critical degree.