With a greater proliferation of devices than ever before, we developers can no longer rely on viewport size as the factor that determines the styles w

Detecting Hover-Capable Devices

submited by

Style Pass

2021-07-16 12:30:08

With a greater proliferation of devices than ever before, we developers can no longer rely on viewport size as the factor that determines the styles we serve up to our website users. Up until fairly recently, we might have caught ourselves making assumptions based on the size of a device: that mobile devices would rely on touch input, for instance, while for larger screen sizes we might assume the majority of users would interact with our webpage using a mouse. We might provide different experiences with a media query:

This doesn’t really help us today. A decent iPad has a higher screen resolution than a low-end laptop. Or someone might be using their tablet as a secondary monitor — using it in this way with a mouse would mean they would be able to use their pointer to hover on elements. But the media query above doesn’t tell us anything about their input method.

Nowadays we need to be more sophisticated about how we detect how a user is browsing our site. Luckily some newer media queries serve this exact purpose.