Detecting Smartphones Using JavaScript

Updated November 2009

Don't you wish there were an easy way to detect whether your web site visitor is connecting with a desktop PC or a mobile device of some sort?

The good news is that it's sort of easy to detect some devices using JavaScript to parse the UserAgent string. Just remember that there are lots of important caveats, including:

• Users can turn off JavaScript in their browsers. If it's off, these techniques won't work.
• Some mobile browsers don't support JavaScript, especially on older or more basic mass market devices.
• When a mobile browser only supports Wap/WML, it probably doesn't support JavaScript. (Which includes BlackBerries in WML mode.)
• These technqniques depend on the contents of the UserAgent string. As a result, these techniques may not work when the browser is emulating another (e.g., some mobile browsers can be set to emulate Internet Explorer).
• Mobile operators can also change the UserAgent contents when the device is customized for their networks and added to their stock device portfolio.
• UserAgent strings are moving targets. Once implemented, you'll need to monitor the effectiveness of your code against the list of your high priority devices or platforms.

Alternatives

If you're keen to roll your own solution, you might want to check out our article describing how to detect mobile devices using PHP. PHP is much more reliable than JavaScript for most devices. Otherwise, you might want to check out HandsetDetection.com or WURFL (see below for more info).

Detect iPhone & iPod Touch

Use the following code to detect whether the device viewing the page is an iPhone and/or iPod Touch. And don't forget: iPod Touches are devices, too!

Why detect this browser? Mobile Safari is based on WebKit and can render most desktop-targeted web content very well (generally excluding heavy AJAX pages). Don't send users to barebones WAP/WML pages! Instead, give iPhone users regular desktop pages, iPhone-optimized content or nicely formatted mobile-optimized content.

Test: You're using an iPhone or iPod Touch:

Test: You're using an iPad:

var deviceIphone = "iphone";
var deviceIpod = "ipod";

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

//**************************
// Detects if the current device is an iPhone.
function DetectIphone()
{
   if (uagent.search(deviceIphone) > -1)
      return true;
   else
      return false;
}

//**************************
// Detects if the current device is an iPod Touch.
function DetectIpod()
{
   if (uagent.search(deviceIpod) > -1)
      return true;
   else
      return false;
}

//**************************
// Detects if the current device is an iPhone or iPod Touch.
function DetectIphoneOrIpod()
{
    if (DetectIphone())
       return true;
    else if (DetectIpod())
       return true;
    else
       return false;
}

Detect Symbian S60 Smartphones

The most popular smartphone platform in the world is Symbian S60. Used primarily by Nokia and a few other manufacturers, S60 features an extremely capable browser.

Why detect this browser? Users with S60 phones as a group are the largest consumers of the mobile web. Similar to the iPhone, the S60 Open Source Browser is based on WebKit and can render most desktop-targeted web content very well (generally excluding heavy AJAX pages). Don't send users to barebones WAP/WML pages! Instead, give S60 users regular desktop pages or nicely formatted mobile-optimized content.

Test: You're using the WebKit browser on an S60 device:

var deviceS60 = "series60";
var deviceSymbian = "symbian";
var engineWebKit = "webkit";

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

//**************************
// Detects if the current browser is the S60 Open Source Browser.
// Screen out older devices and the old WML browser.
function DetectS60OssBrowser()
{
   if (uagent.search(engineWebKit) > -1)
   {
     if ((uagent.search(deviceS60) > -1 || 
          uagent.search(deviceSymbian) > -1))
        return true;
     else
        return false;
   }
   else
      return false;
}

Detect Android Devices

Besides the iPhone, the only other mobile device in recent times to receive as much attention, both from geeky fanboys and the general public, has been the T-Mobile G1, often called the "Google Phone." The G1 is powered by a new mobile phone operating system called Android, which Google has sponsored. Android is a smartphone-class OS with an advanced browser that is similar to Mobile Safari on the iPhone in capabilities.

We added two new methods to the JavaScript code to detect for Android phones. The first detects simply whether the device is running the Android OS. The second detects whether the browser is based on WebKit (like Mobile Safari). The second method may become important in the future as other web browser companies start to release browsers for Android.

Why detect this browser? The native Android browser is extremely capable and also based on WebKit, which underlies Mobile Safari & the S60 browser.

Test: You're using an Android device:

Test: You're using an Android device with a WebKit-based browser:

var deviceAndroid = "android";

//**************************
// Detects if the current device is an Android OS-based device.
function DetectAndroid()
{
   if (uagent.search(deviceAndroid) > -1)
      return true;
   else
      return false;
}


//**************************
// Detects if the current device is an Android OS-based device and
//   the browser is based on WebKit.
function DetectAndroidWebKit()
{
   if (DetectAndroid())
   {
     if (DetectWebkit())
        return true;
     else
        return false;
   }
   else
      return false;
}

Detect Windows Mobile Devices

Devices running Windows Mobile are fairly popular in the U.S., especially among corporate IT departments. This code should detect both the non-touch screen (Standard/Smartphone) and touch screen (Professional/PocketPC) types of devices.

Why detect this browser? Pocket Internet Explorer and Opera for Windows Mobile are moderately capable mobile browsers. Don't send users to barebones WAP/WML pages! Instead, give these users either modest desktop pages (avoid AJAX and complicated CSS) or nicely formatted mobile-optimized content. (The latter is probably the better choice.)

Note: We noticed that Pocket IE doesn't appear load a separate JavaScript file in the page header, so you would need to include the code inline in your page's HTML. (We don't do that on this page, so your Windows Mobile device may not register correctly...)

Test: You're using a Windows Mobile device:

var deviceWinMob = "windows ce";

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

//**************************
// Detects if the current browser is a Windows Mobile device.
function DetectWindowsMobile()
{
   if (uagent.search(deviceWinMob) > -1)
      return true;
   else
      return false;
}

Detect BlackBerry Devices

The most popular smartphone platform in the United States. (Still beats the iPhone in sales!) Unfortunately, the BlackBerry browser isn't great. The browser can be set to WML-only mode, HTML only, or both. Goodness knows why it needs this many options and isn't always on auto-detect. Because of this little "feature", JavaScript-based detection isn't reliable if you need to know that it's a BlackBerry. Then again, if the device is set to WML mode, then that's what you should give it.

Why detect this browser? Although the browser isn't as capable as the WebKit ones noted above, it can display nicely (but minimally!)-formatted mobile-optimized content. At least when the browser is set to HTML mode! Otherwise, in WML-only mode, it should be sent the barebones WAP/WML pages.

Test: You're using a BlackBerry:

Test: You're using a BlackBerry Touch (Storm 1/2):

var deviceBB = "blackberry";

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

//**************************
// Detects if the current browser is a BlackBerry of some sort.
function DetectBlackBerry()
{
   if (uagent.search(deviceBB) > -1)
      return true;
   else
      return false;
}

Detect PalmOS Devices

Last but not least are PalmOS devices. These devices are still fairly popular in the U.S., if less so abroad, and there is a large installed base of PalmOS devices.

Why detect this browser? As the device which practically invented the smartphone category, PalmOS devices ship with a browser and a good number of users have data plans. Unfortunately, I don' t have a PalmOS device in my device library yet, so I can't make any content format recommendations. (Anyone want to give me a U.S. market unlocked GSM Centro?) So no guarantees on how well this script works... (If you try it, please let me know!)

Test: You're using a WebOS device:

Test: You're using a PalmOS device:

var devicePalm = "palm";

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

//**************************
// Detects if the current browser is on a PalmOS device.
function DetectPalmOS()
{
   if (uagent.search(devicePalm) > -1)
      return true;
   else
      return false;
}

Your UserAgent String

It would probably help to know what your browser is reporting in it's UserAgent string...

""

HandsetDetection.com

If you have the technical chops, you might consider registering with a very good (and free!) service called HandsetDetection.com and integrating their service into your site. The service can tell you not only what class of device is visiting your site, but also what the manufacturer and model number are, tons of additional details (e.g., screen size), and even the geolocation of the device. Plus, the site offers lots of reporting metrics about visitor devices. Hand Interactive doesn't currently have any affiliation with them, but we thought you should know about this cool service anyway!

WURFL

The most comprehensive source for mobile device (browser and otherwise) is probably WURFL. It's an excellent free & open source project with an active user community that is constantly updating its device database. WURFL is also a more heavy weight implementation than our PHP code, but can provide detailed handset statistics. (HandsetDetection.com also uses WURFL!)

UserAgent String Resource

Zytrax has a fairly comprehensive list of UserAgent values for mobile devices: www.zytrax.com/tech/web/mobile_ids.html

Enjoy the fun at home!

Download the JavaScript code described here from our new Google Code page!

Note: We've casually tested this code on all of the major smartphone platforms and a handful of mass market phones, plus the Nokia Internet Tablets. So far so good!

That being said, the most important caveat is that you should thoroughly test the code for yourself based on your own needs and expectations -- and always using your high priority target devices!

And if you find this code useful, please consider donating so we can purchase additional devices on our testing wishlist!

License Info & Costs

We have moved this code library to a Google Code hosting project and changed the license to an Apache License 2.0, which better fits a free, open source project like this. We've also rechristened this project "MobileESP." For more info, please visit the new MobileESP site: www.mobileESP.org

Market Share Statistics

• U.S. Market Share, Q1 2008: Read this article at InformationWeek, May 30, 2008.
• World Market Share, Q4 2007: See this press release from Canalys, February 5, 2008.