PhoneGap with jQuery Mobile iOS 7 iPad Broken Display

I made a little iOS app using PhoneGap (Cordova 3.0) and jQueryMobile 1.3.1. All was working well in my xCode simulators as well as when testing out on my iPhone with iOS 6.x. But when xCode 5 and iOS 7 arrived I sadly noticed that my app was now not displaying correctly on the iPad simulators when running iOS 7.

Broken Avalon AppThis one had me stumped for quite some time. I hadn’t changed anything, so clearly something had changed with the iOS 7 update. After much research and quite frankly guessing it appears that the iPad under iOS 7 is measuring the device width and height a bit differently than it had in iOS 6, thus throwing off the CSS that was laying out this app.

Luckily a fairly simple change to the meta viewport tag was all that was needed to set things bad in order.

Removing  ‘width=device-width, height=device-height’ from the viewport meta seemed to set things back in order for me.

I’m not sure if this causes any conflicts elsewhere, but so far I haven’t found any (it’s quiet, almost too quiet).