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 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. (Unlocked devices purchased independently typically have a reasonable default UserAgent string chosen by the manufacturer.)

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!

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

Test: You're using an iPad:

 

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.

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:

 

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.

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

 

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.

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:

 

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.

Test: You're using a BlackBerry:

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

 

Detect PalmOS & WebOS Devices

Last but not least are PalmOS and WebOS 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.

Test: You're using a WebOS device:

Test: You're using a PalmOS device:

 

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. JavaScript detection seems to work well for smartphones, but poorly if at all for mass market phones. 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!

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