API detection is incomplete

[patrickhlauke]

Worth noting that the more modern way to detect the presence of touch event API would be to test for window.TouchEvent. At the same time worth noting that, at least as far as Chrome is concerned, this will return true even if there is no actual touchscreen at browser startup - which makes sense if the intent is indeed to test the presence of the API / the capability. See https://lists.w3.org/Archives/Public/public-touchevents/2016Dec/0007.html for further info

[patrickhlauke]

See https://patrickhlauke.github.io/touch/tests/touch-feature-detect.html in a recent stable Chrome build on a device without a touchscreen - window.TouchEvent will return true there, indicating that the browser does have the API (but the legacy detects will likely return false there, to avoid compat issues with badly coded sites)

[rafgraph]

@patrickhlauke thanks for info about the window.TouchEvent detection, I have included it in v2.

Essentially what I’m looking to know is if the device hardware has a touch screen and that I can access the interactions with the touch screen via the Touch Events API - and the legacy detection is how I'm currently determining this. What’s the best way to detect this?

[patrickhlauke]

there's no one true way to detect presence of a touchscreen...at least not by just relying on touch events API stuff.

paradoxically, it may be good to use pointer events and CSS 4 interaction media features as additional indicators for the presence of a touchscreen, combined with a test for the presence of touch events.

so, altogether, checking window.TouchEvent (touch events themselves are supported) as well as (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) (browser supports pointer events' maxTouchPoints and the value of it is 1 or more, indicating there's a touchscreen) and (for browsers that don't support pointer events but do support interaction media features - which are currently not in Firefox, mind) any-pointer: coarse (in JS test for window.matchMedia("(any-pointer:coarse)").matches - see https://patrickhlauke.github.io/getting-touchy-presentation/#82

[rafgraph]

Thanks for the info. detect-touch-events is one part of a larger detection library, detect-it, in which I use the hover and point media queries to aid in device type detection (I created separate detect-hover and detect-pointer modules).

It seems like, at least for my purposes, the legacy 'ontouchstart' in window is more useful than window.TouchEvent because it will be false when there is not a touch screen (at least on Chrome).

For Firefox, I just ran into a bug in detect-it because it doesn't support the hover and pointer media queries.

The Pointer Events detection isn't very helpful for me now because knowing the device has touch screen does nothing unless I can access the interactions via the Touch Events API (I build with React which doesn't support Pointer Events).