How to detect touch device in 2019?

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

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

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;