Home | Services | Portfolio | Resources | About

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.

The bad news is that there is no silver bullet. These JavaScript-based techniques work with a lots of important caveats, including:

  • Because regular mass market phones (called "Feature Phones" in the industry parlance) typically don't support JavaScript well, if at all, then these techniques can't be reliably used. Instead try a server-based system, such as PHP.
  • Users can turn off JavaScript in their browsers. If it's off, these techniques won't work.
  • Some browsers don't support JavaScript, especially on older or more basic (read: free with a plan) devices.
  • When a mobile browser only supports Wap/WML, it probably doesn't support JavaScript. For example, these techniques are unpredictable with BlackBerries which can be set to WML Only 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. (Unlocked devices purchased independently typically have a reasonable default UserAgent string chosen by the manufacturer.)

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:

 

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.