8

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?

Karptonite
  • 1,490
  • 2
  • 14
  • 30
  • Does this answer your question? [How to remove/ignore :hover css style on touch devices](https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices) – DarkKnight Sep 27 '21 at 06:36

1 Answers1

2

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.

mleister
  • 1,697
  • 2
  • 20
  • 46