What: Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same.
How: You can use media queries.
@media( pointer: coarse | fine | none ){ ... }
/* Primary input device is a finger | a mouse, touchpad or stylus |
there is no primary pointing device */
@media( hover: hover | none ){ ... }
/* Primary input device can hover | it cannot hover or there is no
primary pointing device */
@media( any-pointer: coarse | fine | none ){ ... }
/* Any input device (not necessarily the primary one) is a finger |
a mouse, touchpad or stylus | there is no pointing device at all */
@media( any-hover: hover | on-demand | none ){ ... }
/* Any input device (not necessarily the primary one) can hover |
shows hover state without hovering (with a prolonged tap for
example) | no input device has any ability to show hover state or
there is no pointing device at all */Where: You can read more at CSS-Tricks. The article is over 3 years old but still good.
You can check support at Can I use…
Thoughts: I haven’t been using these enough and they can be a big help in making user experience better. Support is excellent, the only exception is IE, but at least you can assume that IE will rarely be used on a touch screen. But if you want to play it safe, I guess you could always design for touch screens with coarse control first, and add hover options etc through media queries.
Photo credit: Photo of the Empire State Building lit up in red from the Hudson. By me.