Mobile device detection

Mobile Device Detection (or 'Device Detection') is a process of identifying the type of mobile device or other device visiting a web site or other service. This commonly uses the HTTP headers transmitted by the user's browser such as User agent, though it can also be performed from other headers if present, such as IMEI or UAProf links.

Mobile device detection systems typically combine a detection with the creation or retrieval of a capability profile of the device. These vary greatly in complexity, ranging from one data point to many hundreds. A device detection process answers the twin questions of "what is it?" and "what can it do?".

Background

Most desktop web browsers use HTML and display a relatively consistent web page regardless of the browser type or computer manufacturer.

However, mobile browsers may use HTML, WML (WAP) or a number of other markup languages. In addition, there is a much wider diversity in screen sizes, browser types and operating systems than with desktop computers.

As a result, a web site solely designed for the larger screen of a desktop computer is sometimes unlikely to appear correctly or legibly when viewed on the smaller display of a mobile phone.

Developments in mobile and desktop browser technology, including the advent of HTML5 have increased the probability that a given website will display without errors on a contemporary mobile device or tablet. However, there are often functionality, responsiveness and accessibility issues connected with not adapting the user's experience appropriately for mobile, touch, or small-screen devices.

Solution

Any internet-connected device that ‘requests’ a web page via its browser will identify itself with a User agent header string, and other header strings of varying types.

Determining the type of browser or device from the User Agent offers a web developer a source of extra data to allow server-side decisions to be made about how to configure or adapt the experience the end-user will receive.

Example use cases include a redirection to a specific mobile site, adapting HTML, images or CSS before they're sent, augmenting the data available to responsive client-side processes, or using known media capabilities to enhance or degrade the experience for the end-user's device.

Anatomy of a Mobile Device Detection Solution

Device detection solutions tend to consist of at least two components: a detection engine, and an API. The structure and engineering behind these components varies dramatically from system to system.

The simplest system, which is found in many frameworks and CMS implementations is the use of regular expressions or small Javascript functions to determine the status of a device: Mobile/Non-Mobile (with some attempting to detect Tablets). This is an example of a simple detection engine (the logic and content of the expressions), and an API (a simple function call such as "isMobile"). Such APIs are embedded into the majority of WordPress/Drupal mobile themes or plugins, for example, as well as systems such as Categorizr.

More complex systems found in systems such as Apache Mobile Filter, DeviceAtlas, WURFL or DetectRight add a data engine to the components available, and are examples of a Device Description Repository (DDR). The detection engines in these systems typically detect with far greater granularity than a binary value. For instance, they can match the detection to a manufacturer and model of a device.

These DDR systems generally carry a far greater amount of data points about a device than are available by interrogating the device or its user-agent, augmenting the results of the detection with data pertaining to form factor, media support, operating system, browser implementation, peripheral support, and more.

The detection granularity required mandates a much more complex detection engine. This generally takes the form of either lists of user-agents, or user-agent fragments (or both). Some systems also imply capabilities from headers, and some alter the profile depending on detected versions of components such as browser or OS.

Mobile device detection is a key part of adaptive web design, also known as ReSS: "Responsive with elements of Server-Side". In this paradigm, the customer might experience one of many possible responsive experiences depending on device type.

Detection Service Delivery

DDR deployments can be done in a variety of ways. A common way is for the service to be located as a runtime library integrated into an application ("Local Detection"). Most DDRs can be deployed this way.

Another option is to send and receive data with a remote service via a REST or SOAP API ("Cloud Detection"). DeviceAtlas, HandsetDetection, and WURFL are examples of this.

Moving the detection layer outside of the application is another option: this involves integrating a device detection framework into a web server or Cache server, such as Apache Mobile Filter plugging into Apache, or DeviceAtlas plugging into Varnish, NGINX or Apache.

An alternative or complementary approach to device detection is to interrogate the device itself in real-time using any available diagnostic APIs available. Javascript and CSS are able to access a limited number of variables about the environment programatically. This feature is at the core of the use of CSS and Javascript in Responsive Web Design.