rafgraph/detect-it

Detect if a device is mouseOnly, touchOnly, or hybrid, and if the primary input is mouse or touch.

detect-it's Issues

Chrome OS touchscreen detection failure

detect-it fails to detect touchscreen Chrome OS devices (in my case a Pixel Slate) as a touchscreen. Detected data doesn't vary between laptop mode and tablet mode:

deviceType: mouseOnly passiveEvents: true hasMouse: true hasTouch: false primaryInput: mouse

However, detect-touch succeeds:

Touch interface test results:
Test for the standard W3C Touch Events API (vast majority of touch devices):
'ontouchstart' in window: false
Tests for number of touch points (required to detect Microsoft's Pointer Events API running on a touch device, however, devices not implmenting Pointer Events may also indicate this):
window.navigator.maxTouchPoints: 10
window.navigator.msMaxTouchPoints: undefined
Test for Firefox's legacy touch implemntation (which is now obsolete):
window.DocumentTouch && document instanceof DocumentTouch: undefined

Failed test - some results for you

Hi,

Just playing around and decided to hit the test button, results are below:

It says no touch, but I am using a Hanns G HT231HPB 23-Inch Widescreen Touchscreen LCD Monitor, so I think detect-it failed the test...?

Anyway, I pass the results to you to make this github better.

Chrome v59 on Windows detects touchOnly on desktop

Hey Rafael,

Just wanted to bring it to your attention that now Chrome v59 on windows doesn't correctly detect mouse (and mistakes it for touchOnly device) in addition to Firefox. Seems to only happen on Windows and Macs are fine

Test failed so hope this data can help you out

I have a Dell Inspiron 5000 series with FHD touchscreen running MacOS 10,14,1. Have been looking for a way to detect touchscreens on clients devices for a project and came across this. Looks like a very thorough and thought out project but unfortunately failed with my Dell. Here's some data that may or may not help.

Dell Inspiron 5000 MacOS 10,14,1	Chrome 70.0.3538.110	Chrome Canary 72.0.3619.0	Firefox 63.0.3	Opera 56.0.3051.104	Safari 12.0.1 (14606.2.104.1.1)
deviceType:	mouse only	mouse only	mouse only	mouse only	mouse only
passiveEvents:	true	true	true	true	true
hasMouse:	true	true	true	true	true
hasTouch:	false	false	false	false	false
primaryInput:	mouse	mouse	mouse	mouse	mouse
hover:	true	true	false	true	true
none:	false	false	false	false	false
anyHover:	true	true	false	true	true
anyNone:	false	false	false	false	false
fine:	true	true	false	true	true
coarse:	false	false	false	false	false
none:	false	false	false	false	false
anyFine:	true	true	false	true	true
anyCoarse:	false	false	false	false	false
anyNone:	false	false	false	false	false
hasSupport:	false	false	false	false	false
browserSupportsApi:	true	true	false	true	false
hasSupport:	true	true	true	true	true

I'm still searching for a reliable method but there just doesn't seem to be one so far. If you have any ideas or thoughts on this data, just give me a shout.

Thanks.

getting TypeError: Cannot read property 'maxTouchPoints' of undefined` in dev mode bundling

node_modules/detect-it/dist/detect-it.cjs.development.js:39

var hasTouch = (w.navigator.maxTouchPoints || 0) > 0 || supportsTouchEvents;

^

TypeError: Cannot read property 'maxTouchPoints' of undefined`

Problem running on IE11

Hello @rafgraph,

First I would like to say thanks to the work you put in this repository. We have been relying on it since a few years and it work great.

However when I upgrade from v1 to v4, I have problem on IE11, which, sadly, is still required for our customer.

I tried to look for supported browser of this package but wasn't able to find the list. Do you have it document somewhere? If IE 11 is not supported at all I can stay with v1. If it is, I can try to find a fix and submit a PR.

Many thanks.

Pre-built?

Any chance you can include a pre-built version of the script, ready to be dropped into an existing HTML document via traditional <script /> tag?

Pointer Events support

Note that Detect It v2 removed support for Pointer Events detection because they're just not relevant enough (only used by IE and Edge and not supported by React)

While I can't speak for React, it's not accurate anymore that PE are only in IE/Edge. Chrome stable shipped with PE on a few months ago, and chromium-based browsers now have PE as well (e.g. Samsung Internet, Opera...). Firefox are still working on their implementation, but it should ship in the coming months. See http://caniuse.com/#search=pointer%20events

Misleading detection on Galaxy S8

I found out that on my Galaxy S8 the device type detection returns the following report:

deviceType: hybrid
passiveEvents: true
hasMouse: true
hasTouch: true
primaryInput: mouse

I don't know if it's due to Dex support, but hasMouse and primaryInput could mislead.
Thanks

hasMouse issue with Mozilla Firefox v53

detect-it is showing the deviceType being touchOnly on the desktop Mozilla Firefox browser which definitely supports mouse events

CSS Classes

This is really great. We're leveraging this is in place of Modernizr as we find it to be better suited to our use case. Thanks for the killer work.

One thing that Modernizr gives the client that detect-it currently does not is CSS-classes on the root <html> node at the DOM so that CSS can respond to the feature-detection. Obviously this isn't too complicated, I've built this into our app, but I'd be happy to submit a PR at some point and get it into the library as an option if others might benefit with zero uptime.

😎

Pointer Events

Hi, thanks for this very useful library.

The v3 tests are reporting mouseOnly for a Touchscreen Laptop, isn't it now a good idea to re-introduce the Pointer Events into the test?

Can I Use is now at 75%:
https://caniuse.com/#feat=pointer

and WebKit has now JUST supported Pointer Events by default in their Technology Preview:
https://developer.apple.com/safari/technology-preview/release-notes/
(which should fill in most of the remaining percentages very shortly)

And it is now successfully used by:
https://patrickhlauke.github.io/touch/touchscreen-detection/

It would be great to add this back in from version 1 to version 3 to plug this gap in successful detections.

Consider using inputDeviceCapabilities API

Chrome supports the InputDeviceCapabilities API which tries to solve some of the issues here. Worth using when it's supported? Other vendors have indicated support for the idea, but are waiting to see if there's adoption before implementing.

Detection reliability

@patrickhlauke, any thoughts on the detection reliability (I'd consider >95% browser weighted use a win)?

As a note, there are two main reasons for creating this:

1. Setting event listeners: always setting mouse and touch event listeners (basically assuming every device is a hybrid) degrades the experience of touch only, and to a lesser degree mouse only, device users. It is slower and there are some edge cases where it is more reliable to just listen for touch events on a touch only device.
2. Optimize the UI for the best user experience: this is more based on primaryInput, which is a derivative of deviceType, and concerns things like if I'm showing a photo gallery on a touch only device, the best most native like experience is to show each photo fullscreen with no buttons (swipe left/right for previous/next, swipe down to go back to all photos, tap to show instructions, and long press and hold to show an overlay with info about the photo).

In general, as much as I wish what I build could run perfectly on every device, at some point I have to make some assumptions about how the user will interact with my site (touch/mouse) in order to provide the best user experience for the majority of users. So the reliability of Detect It is key, but need not be 100%.