2

I need to apply some alternative :hover for touch devices. Is there any solution in CSS to detect touch device ?

Is there any Media Query option to detect touch device ?

putvande
  • 15,068
  • 3
  • 34
  • 50
Mo.
  • 26,306
  • 36
  • 159
  • 225

1 Answers1

6

There isn't a media query to detect touch devices. You would need to use something like Modernizer.

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
  • 1
    This is correct. Modernizr will detect touch capability, and add "touch" or "no-touch" classes to the `` element. Then in your CSS, you can apply styles to your elements using those classes. – user1171848 Aug 09 '13 at 15:38
  • 5
    Actually, Modernizr **[no longer claims to detect touch devices](http://www.stucox.com/blog/you-cant-detect-a-touchscreen/)**. I would argue there's no need to detect touch devices anyway. In fact, you want to make your content accessible to anyone, regardless of device. You can add embellishments for various input devices, but present the content in such a way that it's always accessible. See **[this article](http://www.stucox.com/blog/you-cant-detect-a-touchscreen/)** by Stu Cox for further explanation and rationale. – aaronburrows Aug 09 '13 at 16:09
  • Interesting @arronburrons, thanks for sharing that article. And I 100% agree with you on making tough-friendly designs, especially on smaller devices. – Brett DeWoody Aug 09 '13 at 17:45
  • 9
    I disagree. There are always edge cases. For instance if part of your UI relies on mouse-hovers you may need to know wether a user is using your app with a touch device or not. – Michiel Jul 14 '14 at 11:39
  • 1
    Remember that even if a device is touch-capable, it may also have a mouse. And the user may be using the mouse top control the app, in which case the touch capability is irrelevant. Really you want to detect *what input device is actually being used", and for that you'll need to write some JavaScript. – Bennett McElwee Dec 15 '14 at 00:29