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) 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 device.name (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.

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.

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.
By submitting this form, you accept the Mollom privacy policy.

About the Author

Aaron Amstutz, Senior Developer

Aaron has a diverse development background that includes Drupal, WordPress, high-end HTML, CSS, and Javascript development. His experience spans numerous clients and several different industries including retail, photography and the non-profit sector.

When not writing code, you can find him wrenching on various motorized vehicles, creating some delicious edible item, tinkering with simple electronics, and learning just about anything he can get his hands on.