cool tech graphics

Quick and handy iPad version-detection plugin for PhoneGap

We were recently using PhoneGap on an iPad specific JavaScript app (HTML5 in PhoneGap with Drupal data backend FTW!) and ran into a problem with the first gen iPad's RAM capability. For this specific project we just needed to disable some functionality for iPad 1 users, so I (with some objective C help from Chris Trahey) cobbled together a quick iPad version detection plug-in.

Our first idea was browser user agent string detection (like this), right? Simple. Too bad that doesn't actually work. The user agent string ("Mobile/xxxxx") isn't actually consistent. I don't know why, but it just isn't. So in-browser solutions are out. Next we started digging into the PhoneGap API.

PhoneGap core comes with the device API, which is great, but (the most obvious option) for iOS returns the device's custom name. This wasn't useful, since "Hulk" isn't the answer I was looking for. There are ways to get the model name from iOS, but that didn't seem like the best (or even pseudo future proof) way either. I ended up checking for presence of camera to detect iPad 1, and presence of retina display for iPad 3+ and iPhone 4+.

To (hopefully) save some other non-objective-c devs some of the serious headaches I had, I threw it up on Github this morning for public use.

I'm totally open to improving this and making it super useful, so if you have code send me a pull request (I'm a web dev, so I'm guessing my C isn't all that pretty), and ideas are always welcome. Ideas with code are the best though, as we all know.

Date posted: September 11, 2012


That perfect - works really well! I tested this with iPad1 and iPad3. This will really help manage memory problems on the older device, while making the most of the newer ones.

it seems to me that if you are in in iOS space, you should detect what info you are actually looking for:

available memory:…

you can read about wrapping it in an js-accessible call here:…

for anything other than ram (existence of camera, specific features, etc) you should be detecting specifically what you need, for a simpler cross-platform interface.

This means providing "onError" functions for camera functionality, for example. Retina stuff can be detected in CSS media-queries.

This will make the final product more robust at doing what it is supposed to do with less work, and less up-front detection.

The problem with device.version on iOS is that it returns the iOS version, not the model of the device. returns model everywhere but iOS, where it returns the custom name set by the user.

yep. I just mentioned that as a method of detecting iOS version. I still think capability-testing (does it have enough ram? did it fail at taking a picture) is better. I think extending device to detect more, in a general way, for all platforms and submitting patches might be the best solution.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?