Jan 31, 2016
Apple's recently released iPad Pro is a lovely device, which runs most existing apps well. I'm happy to report that all my existing Cordova apps run on it without issue. The only problem is, they are blown up doubly to fit the huge new screen.
That's no big deal - lots of apps still haven't been updated to support the new iPad Pro - but us Apple fans are accustomed to perfection, aren't we?
To cut to the chase, here's the basics of what you need to get your Cordova app running crisp and at native resolution on an iPad Pro.
A 167x167px icon is required for the iPad Pro's homescreen. Call it icon-83.5@2x.png and stick it in the [YOUR PROJECT]/platforms/ios/[YOUR PROJECT]/Resources/icons folder, then drag it into your Xcode project and drop it in the correct spot in your asset catalog.
If your project doesn't have icon-small@3x.png (87x87px) and icon-40@3x.png (120x120px) either, you might want to add them too by following the same procedure.
Farewell different Launch Images for all the different iOS devices. Apple is forcing us down the path of having a single Launch Screen storyboard to work on all devices. If you don't use a Launch Screen, your app can't be displayed at full iPad Pro resolution, it's as simple as that.
Since there are now so many different sized iOS devices to consider, switching to just a single Launch Screen makes sense. It's just a pity that making good looking Launch Screen storyboards is a difficult task, and you still need the traditional Launch Images if you intend on continuing to support iOS 6 or 7. Although if you are using Cordova iOS 4+ that doesn't matter, since it has dropped support for iOS 6 and 7 anyway.
A tip: Keep your Launch Screen simple. Getting a complex design to work perfectly on all devices is very complicated, so don't waste your time trying. Do what Apple wants and just make your Launch Screen show the basic outline of your app's UI, or else just show your app's logo or something like that.
These two steps should be enough to get your Cordova app running at full resolution on an iPad Pro. You can then use CSS media queries to target the iPad Pro separately from other devices if you want to (assuming that's how your app's styling is determined).
But there's one additional step if you want to make your app support the Split View multitasking available in iOS 9. This feature is available on all types of iPad with enough power, not just the iPad Pro, but it's arguably even more useful on the iPad Pro because of the bigger screen. Slide Over multitasking is available by default, and in many cases that is sufficient, so this third step is definitely optional. I've also noticed the occasional viewport bug when using Split View multitasking in Cordova iOS 3.9.2, so use caution and test widely. Newer releases of Cordova iOS will hopefully resolve this issue.
Open your project in Xcode and make sure the Requires Fullscreen option is to NO for both iPhone and iPad.
The Ringmaster
ringmaster@cordovacircus.com