Android or iPhone or Blackberry – How to detect using JavaScript

Sometimes when you are writing a mobile web app it becomes important to detect the device type in which the app will run in the browser. After finding out the device type you may write specific code for each device. One example can be handling different screen resolutions for the different device types and then make changes to the UI accordingly. Here’s a rundown of a small example that will show you how to detect the device type.

Mainly you need to detect the browser’s user agent and this will give you the device type. Following are the browser’s user agent for different devices:

For Android: Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; Nexus One Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1.

Currently, Android devices provide the following  in the User-Agent: “Android”, a version number, a device name, a specific build, Webkit version info, and “Mobile”. The above user agent string is for Android Froyo on a Nexus .

For iOS device (iPod/iPhone,iPad): Mozilla/5.0 (iPod; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

This one is for the iPod that I am using. For iPhone and iPads the string format is similar, only it will be mentioned iPhone or iPad in place of iPod. The numbers may change depending on the format.

For Blackberry: Mozilla/5.0 (BlackBerry; U; BlackBerry AAAA; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/X.X.X.X Mobile Safari/534.11+

This one is for BlackBerry 6 and 7.

If you notice every user agent data has the device type name mentioned in it. That is what helps us to detect it. Let’s see how to do it.

Detecting user agent is very easy. Use the userAgent property of javascript’s navigator object. Below is the full java script code block,

var ua = navigator.userAgent;
var checker = {
iphone: ua.match(/(iPhone|iPod|iPad)/),
blackberry: ua.match(/BlackBerry/),
android: ua.match(/Android/)
};
if (checker.android) {
//code for Android
}
else if (checker.iphone) {
//code for iOS device
}
else if (checker. blackberry) {
//code for BlackBerry
}
else{}

4 thoughts on “Android or iPhone or Blackberry – How to detect using JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s