2

I believe I should design my site for different input approaches. I believe the mainstream input types are mouse+keyboard and touchscreen. I want to use CSS to detect if my user uses a touch input. I want to increase lineheight of a linklist so that it's easier to select with a finger.

Is this possible?

Tomkay
  • 5,120
  • 21
  • 60
  • 92
  • maybe that can help you : [http://stackoverflow.com/questions/3373169/webkit-equivalent-of-moz-system-metrictouch-enabled][1] [1]: http://stackoverflow.com/questions/3373169/webkit-equivalent-of-moz-system-metrictouch-enabled – theophone Oct 24 '14 at 10:40
  • Possible duplicate of [Media query to detect if device is touchscreen](http://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen) – chimos Feb 10 '17 at 14:02

2 Answers2

4

I want to use CSS to detect if my user uses a touch input.

In 2019, pretty much all browsers can now understand interaction @media queries:

@media only screen and (hover: none) {

  [... CSS HERE...]
}

indicates that the primary interaction method is not a mouse-pointer (or similar device with hover capability).

This usually means that the primary interaction method is touch.

Browser compatibility

https://caniuse.com/#feat=css-media-interaction

Rounin
  • 27,134
  • 9
  • 83
  • 108
1

According to this article there are no "reliable" ways of detecting touch devices yet: http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

The way I usually go with this is to use CSS media queries to detect the different screen sizes. You could have a stylesheet with a media query for each device resolution, which is the total size available on the device and not only the screen (the browser size). See this cheat-sheet for inspiration: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hope it helps.

Edit: the screen sizes will tell you which device is likely viewing the current page

L.H
  • 325
  • 1
  • 7
  • Thanks for your answer but this doesn't sound like a sane or eligant design approach. Sounds like a hack to me. – Tomkay Oct 24 '14 at 12:15
  • Alright I understand. You should try the Modernizr library at least then - I think you will get a more stable solution according to your needs. See: http://www.hongkiat.com/blog/detect-touch-device-modernizr/ – L.H Oct 24 '14 at 12:21