Deetector – device and feature detection for ExpressionEngine

Since launching this site, I've talked about a couple of different techniques that have dealth with responsive web design. The first, Responsive images with ExpressionEngine, revolved around device detection, and Responsive Layouts with ExpressionEngine on detecting screen size. This time, I'm introducing a plugin that does both!

As pointed out in the comments of Responsive images with ExpressionEngine:

The idea with responsive web design is that your content responds to facets of the visitor's device (e.g. screen size, bandwidth, etc.). The user-agent string is *not* one of those facets. Any solution based around UA-sniffing is going to hit two problems:

  1. False positives. Incorrectly identified a large screen devices as a small screen device and visa-versa (this tends to happen with newly-released tablets and other devices that simply weren't around when the regex was written).
  2. Simply not accounting for small-screen devices with smaller market share (either because they've been around for a long time or because they've just been released).

I'm not going to argue those points. But… the add-on I've been working on does do device detection. But it also does a lot more too.

The add-on is called Deetector and is based on Detector by Dave Olsen. Head over to the Detector page for a description of what the library does and how it does more than just user agent sniffing.

Deetector is just a straight implementation of the library for ExpressionEngine, turning all the values that are returned into variables that you can use in your templates (full list on the Github page).

As well as detecting user agent, browser, operating system, whether a device is mobile, tablet, computer or spider, and the same sort of HTML and CSS features as Modernizr, Deetector will also tell you the screen size and height of your device, so can be used as a more fully-featured upgrade to the RESS add-on that I developed last year. The {window_width} variable can be used as a direct replacement for the {ress} variable.

To detect the screen size, the Detector library needs to be accessed by scripts added to the <head> of your page (i.e. in your templates). Because of this, the Detector library is included in the third_party themes folder, rather than the third_party add-ons folder (because add-ons can be moved above webroot, whereas themes has to be below). Slightly unusual for a plugin to have its own themes folder, but that's the reason why.

All of the variables listed under the Browser/OS and Device headings in the example will return actual unique values whereas all the others will return either TRUE or FALSE.

This add-on has only been tested on my MacBook Pro, iPod Touch (3rd Generation), iPad 2 and HTC One XL so far. But one of the warnings, about getting incorrect results in the user agent string, has already come to light in my testing.

  • On the MacBook Pro, everything was fine with Chrome, Safari, Firefox and Opera all being identified correctly, and all identifying the OS correctly (although Opera reported a colour depth of 32 compared to 24 for the others). All identified themselves as 'desktop' browsers.
  • On the iPod Touch, both Chrome and Safari reported themselves as Mobile Safari although the full user agent strings were slightly different. Opera identified itself correctly, but again had a different colour depth value (4 as opposed to 32 for the other two). All identified themselves in the 'mobile-basis' browser family.
  • The iPad returned the same results for Chrome and Safari.
  • The HTC One XL gave some interesting results, mainly in how the different browsers identified the device. Chrome came closest, saying the device was a One X, the built-in Android browser said it was a HTC Eva, Firefox said it was a Generic Smartphone, and Opera wouldn't display the page at all. Chrome, Android and Firefox all identified their browsers correctly although Firefox said the device wasn't hi-res capable when the others did and it also said the colour depth was 16 compared to 32 for the others. But Firefox also said the window was twice as high and wide (1134 x 720 compared to ~560 x ~360 for the others). I've only mentioned the screen size for the One XL because it's the only device where the reported values differed widely between browsers. All the others were pretty much right on the money.

So you can see that you still need to be careful with the information that this plugin provides you with. But even given the provisos, I think it provides quite a flexible toolkit with which to build sites that work on a variety of different devices.

Note: Variables for audio, video, input and inputtypes have been commented out in the plugin because they were causing errors which I couldn't track down. This has been my first plugin working with an external library and I've had to learn a lot along the way (thanks to Low and Adrian Macneil for helping me out), so if you have any idea what might be causing the errors with the variables above, or find anything else not working right, please let me know.

Download the plugin from Github