How to detect touch device in 2019?

Question

For my app, I need to radically change the entire UX for touch devices using an onscreen keyboard (eg. mobile, touch TV) vs mouse/kbd devices (eg. desktop, a mobile with a bluetooth mouse/kbd).

NB. I've already grokked responsive layout with CSS grid and media queries, so that aspect is dealt with. My issue isn't one of layout, it's that the entire UX needs to be fundamentally different. The best option I have so far is to listen for a mousemove on the whole viewport.

How can I do this using modern browsers?

Note I've already read the existing answers which are all several years old, and generally conclude that it can't be done.

Answer 1

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 */
}

But 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.

UPD: hack for old browsers removed, seems like most old browsers does not support hover and pointer media queries too. You may use touch event detection and touch-only navigator properties from another answers

UPD2: In your case, it's preferable to use

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

Answer 2

You can detect using Javascript use a simple condition here

if(('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
    //this is a touch device you can any action here 
}else {
    //it's not touch device another code here
}

Also, the following the link here https://ctrlq.org/code/19616-detect-touch-screen-javascript

Answer 3

In javascript.

 if ("ontouchstart" in document.documentElement)
    {
        document.write("your device is a touch screen device.");
    }
    else
    {
         document.write("your device is NOT a touch device");
    }

code pen