Detecting device and browser
This article explains client and server-side techniques for detecting browser capabilities.
Why use device and feature detection?
The ability to identify a device, browser or feature enables the developer to perform actions such as:
- Serve a mobile formatted site rather than the desktop site.
- Serve smaller or larger images to suit screen size, or swap SVG graphics for bitmap images on less capable devices.
- Enhance functionality on more capable devices by applying progressive enhancement based on feature and object detection.
- Increase or decrease font size, margins and padding to scale the actionable areas on a touch device.
- Serve different sizes and/or formats of media such as video to suit device codecs or capabilities.
Common approaches to device detection
Device detection can be accomplished server-side, before content is delivered to the client, or client-side, after content and related files have been loaded to the device itself. Both approaches have advantages and disadvantages, which are described in this topic. Smartphone browsers generally have better client-side detection capabilities than cheaper feature phones, and this gives Web developers more flexibility to use design techniques such as the responsive design approach. Feature phone browsers are designed to provide speed, performance and bandwidth optimization, but may lack advance features required for some design approaches.
Media queries are another common strategy for adapting content to a device, based on media type and device width or display size. For more information on media query techniques, see Creating a Mobile-First Responsive Web Design and Mobifying Your HTML5 Site on HTML5 Rocks.
Advantages of client-side detection
Client-side detection can provide a useful fallback and can implement run-time tweaks in response to behavior such as changes in device orientation. On more advanced devices, client-side Ajax and CSS can be used to download additional content and enhancements without having to refresh an entire page.
Disadvantages of client-side detection
Server-side detection of devices and capabilities is usually performed by analysing HTTP request headers received from the client (also called the user agent). In most cases, only the User-Agent string is needed, but sometimes a combination of more than one header is required.
For more information about specific server-side detection techniques, see:
- Server-Side Detection: History, Benefits and How-To
- A Non-Responsive Approach to Building Cross-Device Webapps.
Advantages of server-side detection
The main advantages of server-side detection are that it saves client resources and does not rely on the ability of the client to adapt the content that it receives. As soon as the client makes a request, server-side applications learn the identity of the device and what it can do. This makes it possible to serve only media and content that is most appropriate for that particular device. For example, if a mobile device is old and has a small screen, it will not be served a page section displaying HD video.
Server-side detection enables optimization of assets such as CSS files, CSS image sprites, scripts, and so on. It can be extremely efficient when combined with device or ‘group-based’ caching on the server. For an example of a group-detection script, see WordPress Mobile Pack's device group detection script.
Disadvantages of server-side detection
Databases for server-side detection require frequent updating, are not always accurate, and do not respond to user settings or personalization. Employing a device database requires implementing a server-side API and maintaining it. (The simplest solution is to employ a short script containing only very basic information, such as the one shown in WordPress Mobile Pack’s lite-detection php script.)
Best of both worlds
Server-side and client-side detection techniques can be used together to enable the developer to only serve content that is supported by a device, while allowing the browser to adjust style and layout in response to the current context.
Note: This material was originally published as part of the Nokia Developer Web Development Library, available as Device and browser detection
To access screensize with JS is tricky in mobile: http://tripleodeon.com/2011/12/first-understand-your-screen/