CODEWITHSUNDEEP
desktopdetectiontouchscreen
loukote
loukote

Reputation: 21

detect touchscreen desktop

My ultimate wish is to allow users using a touchscreen desktop (an All-in-one computer without mouse or keyboard) to navigate on a website that uses tooltips. Using a mouse, hovering over a tooltip opens it, the tooltip contains links that can be clicked. Using a touchscreen, there is no hover, only 'touches'/clicks. In both cases the page will be displayed on the same OS using the same browser, once the user has a mouse, the other time the user has a touchscreen.

So I need to distinguish between the two: a desktop computer with a mouse and a touchscreen desktop computer without a mouse. Modernizr touch tests (http://modernizr.github.com/Modernizr/touch.html) fail completely on a touchscreen desktop (http://shop.lenovo.com/us/landing_pages/thinkcentre/2010/m90z). Sniffing the UA or browser does not work either.

(After a fair amount of searching, all the detection tries to distinguish different versions of mobile phones or tablets, browsers, UAs... Not desktop touchscreens that are running on the same OS using the same browser.)

Any ideas?

Upvotes: 1

Views: 255

Answers (1)

evpozdniakov
evpozdniakov

Reputation: 543

Add event listeners touchstart and mousemove to your page, then wait the user starts to interact with your page. If the first event is mousemove, then user operates with mouse, so it is probably a desktop, otherwise this is a touch-screen.

$(document).on('touchstart.desktopDetect mousemove.desktopDetect', function(ev) {
    window.IS_TOUCHSCREEN_DEVICE = (ev.type == 'touchstart');
    $(document).off('.desktopDetect');
});

Check working example here: https://jsfiddle.net/evpozdniakov/uvb51cnm/embedded/result/

Upvotes: 1

Related Questions