How to detect a mobile browser

If you're looking to provide your visitors with a device-optimized experience that works great on any screen, you need a reliable method for device detection including a way to detect the mobile browser. This is a very common technique used by all top Internet companies that chose to build fast and lightweight adaptive websites.

When it makes sense to detect mobile browsers

There are basically two disparate ways to build websites that work great on all devices, including responsive web design (RWD) and adaptive web design (AWD). Responsive websites can rearrange the content on-the-fly, client-side, so that it always fits the browser’s width, while adaptive means creating experiences specifically tailored for different device categories (there are different website codes for different buckets of users).

Detecting mobile browsers and using other device detection features are only necessary when you choose to go adaptive, either by using separate URLs or dynamic serving. This technique is typically used to:

• decide what content should and what shouldn't be sent to the requesting device (dynamic serving and separate URLs)
• decide if the user should be redirected to a mobile specific URL (only separate URLs)

If you want the experience to be optimized for every device, the server must know exactly what the visiting device is (e.g. low-end phone, smartphone, tablet, smart TV, desktop PC, etc.). And this is based on device detection. Of course the user experience can be further optimized by detecting other device characteristics, and not just the type of device. This technique is described later in this article.

In the following post we focus on server-side mobile browser detection which we think is superior to any home-grown solution based on PHP or Javascript. If you’re looking for more information on building device detection, head over to this article on the DeviceAtlas blog.

Detecting mobile devices – a rough guide

To detect a mobile browser,and other device properties using a cloud-based server-side detection solution, you need to drop a simple code snippet that calls the API.

It works by examining information contained in the HTTP headers, particularly User Agent strings sent by all web-enabled devices. The User Agent is looked up in a database that returns any requested information including device type. If the returned device type equals ‘mobile phone,’ then the detected browser is a mobile browser and the server can be triggered to send mobile-optimized content.

The most problematic aspect of this process is that the information contained in the User Agent often isn’t correct because many devices deliberately pretend to be something else. This problem can be overcome by using third-party detection solutions which use sophisticated techniques that don’t rely on simple regex User Agent matching.

Here are simple steps that you can follow right now to quickly and easily detect a mobile browser using a cloud-based API.

1. Sign up for a free 14-day DeviceAtlas trial by clicking here.
2. Check your license key which is required for the API call to work.
3. Choose implementation code that suits your environment, and enter your license key.
4. Drop the code in your website (see examples below) triggering different behaviour when the URL is opened on a mobile device. Optionally: Detect other device characteristics to change website content accordingly.
5. Test the setup by opening the website on a mobile phone or by changing the default User Agent in your browser (this article explains some simple methods to do that).

Here are browser and device detection implementation examples for some popular environments.

1. JAVA

// Get the Cloud API instance and set the license key
Client client = Client.getInstance(); 
client.setLicenceKey("your_licence_key");

// Pass the HttpServletRequest object and get back the device properties
Map results = client.getDeviceData(request);
Map properties = (Map) results.get(Client.KEY_PROPERTIES);

// Detect if mobile device
Boolean isMobileDevice = (Boolean) properties.get("mobileDevice");
if (isMobileDevice != null && isMobileDevice.booleanValue()) {

    // Example 1: Get the screen width for the images optimization
    Integer displayWidth = (Integer) properties.get("displayWidth");

    // Example 2: Touch screen optimization
    Boolean useBiggerIcons = (Boolean) properties.get("touchScreen");

    // Example 3: Send Geo Location JS to client?
    Boolean supportsGeoLocation = (Boolean) properties.get("js.geoLocation");
}

More on browser detection in a JAVA environment.

2.PHP

// Include DeviceAtlasCloud library
include './DeviceAtlasCloud/Api/Client.php';

// Call static method and get back the device properties
$results = DeviceAtlasCloudClient::getDeviceData();
$properties = $results[DeviceAtlasCloudClient::KEY_PROPERTIES];

// Detect if mobile device
if (isset($properties['mobileDevice']) && $properties['mobileDevice']) {

    // Example 1: Get the screen width for the images optimization
    $display_width = $properties['displayWidth'];

    // Example 2: Touch screen optimization
    $use_bigger_icons = $properties['touchScreen'];

    // Example 3: Send Geo Location JS to client?
    $suports_geo_location = $properties['js.geoLocation'];
}

More on browser detection in a PHP environment.

3. .NET

// Get the Cloud API instance and set the license key
Client client = Client.GetInstance();
client.SetLicenceKey("your_licence_key");

// Pass the HttpServletRequest object and get back the device properties
Hashtable results = client.GetDeviceData(Request); 
Hashtable properties = (Hashtable) results[Client.KEY_PROPERTIES];

// Detect if mobile device
bool isMobileDevice = (bool) properties["mobileDevice"];
if (isMobileDevice.HasValue && isMobileDevice.Value) {

    // Example 1: Get the screen width for the images optimization
    int displayWidth = (int) properties["displayWidth"];

    // Example 2: Touch screen optimization
    bool useBiggerIcons = (bool) properties["touchScreen"];

    // Example 3: Send Geo Location JS to client?
    bool suportsGeoLocation = (bool) properties["js.geoLocation"];
}

More on browser detection in a .NET environment.

4.Python

# Import DeviceAtlasCloud library (locally deployed at DeviceAtlasCloud/Api/Client.py)
sys.path.append(os.path.join("DeviceAtlasCloud"))
import Api.Client

# Initialize the client and get back the device properties
client = DeviceAtlasCloud.Client.Client()
results = client.getDeviceData()
properties = results[da.PROPERTIES]

# Detect if mobile device
if 'mobileDevice' in properties and properties['mobileDevice']:

    # Example 1: Get the screen width for the images optimization
    displayWidth = properties['displayWidth']

    # Example 2: Touch screen optimization
    useBiggerIcons = properties['touchScreen']

    # Example 3: Send Geo Location JS to client?
    supportsGeoLocation = properties['js.geoLocation']

More on browser detection in a Python environment.

Use 'mobileBrowser' API call to detect browser names

If you're looking to detect particular mobile browser names, you can also use an API call 'mobileBrowser.' This property returns values, such as Amazon Silk, Android Browser, Chrome Mobile, Firefox Mobile, Opera Mobile, Safari Mobile, or UC Browser. For more detailed browser targeting, DeviceAtlas allows you to use 'browserVersion' and 'browserRenderingEngine'.

Read this article to learn more about the latest statistics on mobile browser popularity.

Detect and target other device characteristics

Detecting mobile browsers is just one, basic example of many possibilities that device detection offers. It is possibel to detect and target over 160 different device properties to further fine-tune user experience on varying devices. Here are some examples:

• Year Released – visitors that aren’t using the latest mobile phones may be sent to a lighter website to make sure they are provided with good user experience
• HTML5 – HTML5-based website features may not work on every phone and therefore some scripts may not be sent to devices that don’t support HTML5 thus saving on bandwidth
• Touchscreen – some devices, particularly low-end and older phones as well as Smart TVs are not operated via touch interface and web developers can take this under consideration
• Diagonal Screen Size – it makes sense to offer users on devices with smaller screens with a different experience than those using the latest 5 inch or larger phones
• OS Name - users of different mobile operating systems can be offered with an optimized experience

The largest online companies use device detection

In a recent post on our blog we investigated many top Alexa websites in terms of how they address mobile visitors. We learned that all of them use server-side device detection and adaptive web design, either by using separate URLs or dynamic serving.

Some notable examples include Google (dynamic serving), Amazon (dynamic serving), Facebook (separate URLs), and Twitter (separate URLs). This is mainly due to the fact that adaptive web design allows these companies to come up with fast and lightweight online experiences that help them increase conversions and user engagement on mobile devices. If these aspects are important for you as well, it makes sense to seriously consider adaptive for your business.