I'm developing a webapp (not a website with pages of interesting text) with a very different interface for touch (your finger hides the screen when you click) and mouse (relies heavily on hover preview). How can I detect that my user has no mouse to present him the right interface? I plan to leave a switch for people with both mouse and touch (like some notebooks).
The touch event capability in the browser doesn't actually mean the user is using a touch device (for example, Modernizr doesn't cut it). The code that correctly answers the question should return false if the device has a mouse, true otherwise. For devices with mouse and touch, it should return false (not touch only)
As a side note, my touch interface might also be suitable for keyboard-only devices, so it's more the lack of mouse I'm looking to detect.
Source: Tips4all
How about listening for a mousemove event on the document. Then until you hear that event you assume that the device is touch or keyboard only.
ReplyDeletevar mouseDetected = false;
function onMouseMove(e) {
unlisten('mousemove', onMouseMove, false);
mouseDetected = true;
// initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);
(Where listen and unlisten delegate to addEventListener or attachEvent as appropriate.)
Hopefully this wouldn't lead to too much visual jank, it would suck if you need massive re-layouts based on mode...
Tera-WURFL can tell you the capabilities of the device that is visiting your site by comparing the browser signature against its database. Give it a look, its free!
ReplyDelete