Device detection WURFL

Start WURFL'ing for proper device detection

One of the more common tasks in modern web development is ensuring that your content is accessible from a range of devices from the small resolutions of some earlier smart phones (and indeed some current) to the ever increasing pixel playgrounds of the bigger devices such as the Samsung Galaxy Note, Lumia 1520 or Microsoft’s Surface Tablet.

Beyond these mobile devices of course, we have a range of resolutions for desktop machines using different sized monitors.

It pays to ensure that, whatever it is that you’re developing; it is optimised for the majority of resolutions out there.  There’s no reason why, in fact, that by making correct use of all of the technologies available, you can't optimise for the multitude of different screen sizes!

We all know about media queries for CSS which have become a staple in your day-to-day development work, but when you’re writing JavaScript and you need to know some specific information about the device that is accessing your page, things can become a little harder.

What you might do in JavaScript is make a simple differentiation and store in in a variable:

var isMobile = false;
if ($(window).width() < 1024) {
	isMobile = true;
}

Throughout your JS, you can then determine whether the device is (what you think is possibly) a mobile device and then act accordingly.

The problem here of course is that the above solution doesn’t cater for situations when the browser is resized.  You could simply update the variable on resize or maybe use user agent strings for device detection instead of resolutions, but why do that when there is a far better solution available?

Device Detection with WURFL

From the words of WURFL:

WURFL.js is a JavaScript file that provides information about the device that is accessing your page. Whether it is a desktop browser, a tablet, a mobile phone, a smart TV, game console or someone with his wristwatch.

It’s incredibly easy to use..

Add the below to your page:

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

Open up your dev tools and type WURFL into your console.  You’ll see a lovely object returned with all the information you need to start JavaScripting more effectively in today’s multi-device world!

You may see the below:

{"is_mobile":false,"complete_device_name":"generic web browser","form_factor":"Desktop"}

In summary, this object is inferring that your device is not in fact a device, it is a generic web browser such a Google Chrome or Firefox with a form factor of ‘Desktop’.  You can see quite clearly your browser is not a mobile due to the is_mobile property's value of false.

This can tested simply by using the following:

WURFL.is_mobile // false

As you can see, there definitely some helpful information there to use throughout your JavaScript and all for the cost of just 526 bytes!

The information WURFL returns can certainly be helpful for use in Google Analytics when you can fire over far more granular information about the form factor or device being used to access your website.

More use case scenarios can be found over at WURFL.io.

Thanks to the chaps at WURFL for a great resource!

Leave a comment