Search code examples
csstouch

How to write CSS media queries to detect a touchscreen device?

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?

Solution

  • 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