Problem with CSS media query to detect if Samsung device supports hover

Question

I'd like to use pure css to provide different behavior for devices that do not support hover. This is easily achievable on iOS and Google devices with:

@media (hover: none) {
}

However, Android devices do not seem to support this in the way that I expect. Here is a simple test case: https://codepen.io/kylegordy/pen/abOLbXV

I would expect all green on a device that supports hover (like a desktop) and all red on a device that does not. But Samsung phones fail with both media queries for hover.

It seems that we can work around this by testing pointer: coarse, but that isn't what we are actually trying to test, so I'm reluctant to use this as a workaround. Is there some other solution I should be considering?

Answer 1

For now I am using the same solution as you mentioned:

@media (hover: hover) and (pointer: fine) {
  ...
}

(pointer: fine): Only a mouse pointer (or similar) will trigger this media query. This query is helpful since a Samsung device supports both - touch and mouse input.

Probably it's best to always use the (pointer: fine) unless you want touch events to trigger hover effects on those devices.