Am I Desktop or Device?

Device or Desktop

I design interfaces and interactive projects for most platforms and a snippet of code I find the most useful and always use currently is this:

var isDevice = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));

It’s basically doing a general user agent sniff that returns a Boolean value (true or false) and it works out if it’s a device or a desktop machine. Some of you might disagree and suggest a feature test is more appropriate (like whether it has accelerometer abilities or if touch functionality exists).

The problem I’ve found with these methods is that more and more desktop machines have tablet/mobile-type functionality as well (like touch events) so they will often report the presence of these features even though the user might not actually be using them.

So to build on this I then create the interaction inputs (mouse or touch) like this:

var interactionUp, interactionDown, interactionOver;

if(isDevice) {
 interactionUp = "touchend";
 interactionDown = "touchstart";
 interactionOver = interactionDown;

} else {

 interactionUp = "mouseup";
 interactionDown = "mousedown";
 interactionOver = ""mouseover;

};

$(yourObject).bind(interactionDown, onInteractionDown);
$(yourObject).bind(interactionUp, onInteractionUp);
$(yourObject).bind(interactionOver, onInteractionDown);

Then, in the functions, if I want to store, say, mouse/finger X and Y positions I do this (where touchStartPos is an object that stores the mouse/finger down position):

function onInteractionDown (e) {

 touchStartPos.x = (isDevice) ? e.originalEvent.pageX : e.pageX;
 touchStartPos.y = (isDevice) ? e.originalEvent.pageY :e.pageY;

}

Do you have a better way of doing it?

Or do you think my method is fundamentally flawed?

Leave a comment!

4 thoughts on “Am I Desktop or Device?

  1. Hi Chris,

    although I’m not a fan of browser sniffing, it also has come to our attention that feature detection is getting hard as you mention.

    Can I ask you you’d come to your test regex? Do you have any learnings from using this in a production environment?

    Thanks!

  2. Hi ivow,

    You’re right – there are no apparent ‘best practices’ when it comes to detecting the device. Some mouse-input machines now support touch input, some ‘static’ machines now support geo-location and accelerometers etc etc.

    So in answer to your question – this simple regex gives me probably a 70-80% probability of being correct – not great odds at all, but as UI designers/developers we have to do our best to meet the needs of our audience and until I discover a better solution I’ll continue to use this.

    What is your current solution to the issue?

  3. Currently still feature detection, but then again, we don’t test this at a very wide variety of devices (a Nokia Windows Phone, 2 Android devices & iOS), so it probably gives us the same amount of correctness :). And what you will find online, tested by someone, gives an imprint of a certain time frame, it can already been outdated.

    Nevertheless, I think your approach is clean and simple. And I think the decision has to be made depending on the situation. If it’s just additional behaviour, I think this is good enough. If your site or app depends on it, maybe this will give you the wrong impression.

  4. Is Modernizr an option? I like it. I just extended it with an .autoplay test. The ability to pick and choose which tests I need and download a made-to-order, no-more-than-I-need minified library seems pretty cool. It was new to me anyway.

    As for testing which facility a user is using – I’d have to think about that one awhile.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s