Detecting Smartphones Using JavaScript

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 techniques 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.

Examples: Detecting iPhone & iPad

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! (See the JavaScript API documentation for the complete set of device detection methods and important limitations in using JavaScript.)

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;
}

Introducing MobileESP!

Since the original publication of this article in 2008, we've seen interest grow dramatically for this easy-to-use mobile detection library for web site publishers. As a result, we have spun this code library off into a separate free open source (Apace 2 license) code library called MobileESP. We've continuously expanded the capabilities of the PHP code library as new devices came out. So, for the latest information, including updates, bug fixes, new features, and more, please see the project web site: www.MobileESP.org. Here are a few quick links:

• Get MobileESP: Download the latest version of the MobileESP code libraries! Learn more.
• The MobileESP API: See the complete list of mobile detection functions which are largely consistent across supported web technologies (PHP, Java, APS.NET, Ruby, and JavaScript).
• Live MobileESP API Demos: Want to see how the MobileESP APIs work with your device? Check out the PHP & JavaScript live demos!
• Download Samples: There are several sets of sample web pages you can download to see how easy it is to integrate MobileESP into your web site. Learn more.
• License Information: MobileESP is free to use, though donations are greatly appreciated and encouraged. For more information, please visit the Licensing page on the MobileESP web site.

Alternatives

MobileESP is easy to implement and generally great if you're primarily concerned about the class of device (e.g., smartphone or not, phone vs. tablet), or the mobile platform (e.g., iPhone or Symbian S60). If you need detailed device information or usage metrics, you may wish to check out WURFL (free!) or HandsetDetection.com.

Support MobileESP!

If you find the MobileESP code library useful, please consider donating so we can purchase additional devices on our testing wishlist! Donations of $25-50 are greatly appreciated!