Detecting iPhones/iPads/Androids and their OS Versions in JavaScript via User Agent

This will just be a really quick  JavaScript code snippet on how to extract valuable device information from the User Agent devices navigate to your website with.

The User Agent contains lots of information, but what matters is the OS (iOS, Android), the OS Version (x.y[.z]), and then the device type.

On iOS we have the iPhone and the iPads (regular and mini). While currently it isn’t possible to distinguish between iPad and iPad mini, you can distinguish iPhones from iPods.

On Android we have two device types: can be either an Android smartphone or an Android tablet.

Here are some examples of User Agents. For Android it’s interesting to note that smartphone UAs contain the word ‘Mobile’, while tablets don’t. I’ve highlighted the important stuff in bold:

iPhone with iOS 5:
Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

iPad with iOS 5:
Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

Android Phone, e.g. Samsung Galaxy SIII with Android 4.0.4
Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Android Tablet, e.g Motorla Xoom with Android 3.0
Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13

I’ve created a little JavaScript function that extracts all the important info from the User Agent and provides it in a nice JavaScript object. If you add it to your JS, it will just run at the page loading, after which you can acces a set of information:

deviceDetection.isSmartphoneOrTablet

will return true if the device is an iPhone, iPad, Android of any kind, BlackBerry, otherwise false.

deviceDetection.device

will return either iPhone or iPad, or just ‘Android’ (no matter whether tablet or phone).

deviceDetection.osVersion

returns a String with the Version. It supports version numbers with max. 3 levels (4.3.1).

deviceDetection.deviceType

returns ‘phone’ for iPhone and Android smartphones, ‘tablet’ for iPad and Android tablets.

deviceDetection.userAgent

just returns the original user agent string. 

Here we go, enjoy! :-)
devicedetection.js

 var deviceDetection = function () { 
var osVersion, 
device, 
deviceType, 
userAgent, 
isSmartphoneOrTablet; 

device = (navigator.userAgent).match(/Android|iPhone|iPad|iPod/i); 

if ( /Android/i.test(device) ) { 
    if ( !/mobile/i.test(navigator.userAgent) ) { 
        deviceType = 'tablet'; 
    } else { 
        deviceType = 'phone'; 
    } 

    osVersion = (navigator.userAgent).match(/Android\s+([\d\.]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace('Android ', ''); 

} else if ( /iPhone/i.test(device) ) { 
    deviceType = 'phone'; 
    osVersion = (navigator.userAgent).match(/OS\s+([\d\_]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace(/_/g, '.'); 
    osVersion = osVersion.replace('OS ', ''); 

} else if ( /iPad/i.test(device) ) { 
    deviceType = 'tablet'; 
    osVersion = (navigator.userAgent).match(/OS\s+([\d\_]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace(/_/g, '.'); 
    osVersion = osVersion.replace('OS ', ''); 
} 
isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); 
userAgent = navigator.userAgent; 

return { 'isSmartphoneOrTablet': isSmartphoneOrTablet, 
         'device': device, 
         'osVersion': osVersion, 
         'userAgent': userAgent, 
         'deviceType': deviceType 
        }; 
}();