jQuery is mobile? Detect Mobile Devices with WURFL.js and jQuery

There is no need to explain how awesome jQuery is. It is the Go-To place for developers looking for tools. However, when it comes to browser and device detection, jQuery comes up short. A common question for jQuery is mobile device detection. However, jQuery.browser was deprecated, and finally removed in version 1.9. So, jQuery doesn’t provide functionality to detect browser or device.

jQuery is mobile? Get the answer with WURFL.js

Instead, the documentation recommends to try feature detection. Fair enough. However, we often get questions about whether WURFL and jQuery can play together. A quick Google search confirms that this is a relevant topic. Mostly, the suggested solutions are based on hard-to-maintain patterns, such as performing regular expressions on the User-Agent and looking for an ever increasing number of substrings in the User-Agent. We know from experience that these types of hacks fail over time, and is one of the key reasons people turn to WURFL. Wouldn’t it be wonderful if a free tool like WURFL.js could work with jQuery?

If we set up WURFL.js and jQuery side-by-side, without any integration, then it may be handy to have the device information in the jQuery object and let jQuery be in charge.

Load jQuery

Step one is to load jQuery form your favorite source:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Load WURFL.js

Then, we need to load WURFL.js. There are many ways to do this. For now, let’s stick with the getScript() function built into jQuery. This function will download the WURFL.js script asynchronously and execute it. You can also use $.ajax() if you want more control or to tweak some properties of the request. The actual WURFL.js file has to be downloaded. You can’t copy the contents of the file and inline the code. This comes with the cost of one additional HTTP request. However, this is necessary because most of the device detection happens on the WURFL.io server. This is the reason why a WURFL.js-based solution is much easier to maintain: WURFL.io handles the user-agent mess, and lets you concentrate on making a great web experience.

Put WURFL in jQuery

The code would look something like this:

  $.getScript("//wurfl.io/wurfl.js", function() {
    $.wurfl = WURFL;
  });

Now, you’re able to access WURFL capabilities like this:

console.log($.wurfl.is_mobile);
console.log($.wurfl.complete_device_name);
console.log($.wurfl.form_factor);

These are the capabilities that are available for free from WURFL.js Community Edition. If you need more capabilities, then WURFL.js Business Edition can help you with that:

console.log($.wurfl.physical_screen_width);
console.log($.wurfl.resolution_width);
console.log($.wurfl.pointing_method);

Finalize

The next step would be to add some simple error handling.

$.getScript("//wurfl.io/wurfl.js")
  .done(function() {
    $.wurfl = WURFL;
  })
  .fail(function() {
    $.wurfl = {};
  });

Voila! That’s really all it is to it. For your convenience, we’ve made a simple CodePen demo.