CODEWITHSUNDEEP
javascripttypescript
Nickon
Nickon

Reputation: 10156

Detect touch monitor with mouse attached

I wonder if it's possible to detect a kind of the device that runs a JS app.
What do I mean? - I want to serve touch monitors (that can be used as a normal touch devices and also can have a mouse attached - so they can behave as a normal PC) and classic touch devices (e.g. mobile phones - without possibility to use a mouse).

Is it possible? I know how to detect touch devices:

var isTouch = !!("ontouchstart" in window || navigator.msMaxTouchPoints);

But how to detect that there is a touch monitor or at least it has a mouse attached?

Upvotes: 0

Views: 93

Answers (1)

Frostie
Frostie

Reputation: 211

Well, you already have a bool reflecting touch capabilities. Obtaining the same for the mouse is doable, although not exactly elegant. You could do something like this:

var hasMouse;
window.addEventListener('mousemove', function mouseCheck(e) {
    window.removeEventListener('mousemove', mouseCheck);
    hasMouse = true;
});

Combined with user-agent inspection, you could get a decent estimate of the users device. Naturally some mobile browsers allow one to spoof a non-mobile user agent for 'desktop' like viewing. I'm not too fond of the idea of coercing interface formats in a situation where you aren't certain of the devices capabilities. How about simply showing a modal at application start, and using the isTouch && hasMouse, along with user-agent information to indicate the 'recommended' layout?

Upvotes: 1

Related Questions