How to detect touch device in modern browsers

touch.md

https://stackoverflow.com/a/63666289/1084300

This is really simple with just one line of code:

const touch = matchMedia('(hover: none)').matches;

• What? matchMedia?
• This is just a JS API to do CSS @media queries. And it is supported in modern browsers: https://caniuse.com/#feat=matchmedia. Of course, you may use such queries directly in CSS:

@media (hover: none){
    /* touch stuff goes here */
}

• Ok, what @media queries may be also useful?

@media (hover: none) and (pointer: coarse) {
    /* touchscreens */
}
@media (hover: none) and (pointer: fine) {
    /* stylus */
}
@media (hover: hover) and (pointer: coarse) {
    /* controllers */
}
@media (hover: hover) and (pointer: fine) {
    /* mouse or touchpad */
}

However, this will query only the primary input method. If you want to go deeper, you may use any-hover and any-pointer to query all input devices.

For better coverage, it would be preferable to use:

const touch = matchMedia('(hover: none), (pointer: coarse)').matches;