iOS7 and PhoneGap build - app height and touch response - ios

Question

I've just built an app using PhoneGap build, running on iOS7. The build went fine, and the install was fine, but there are some problems that I can't figure out.
Firstly, the app height isn't full size - looks to be c. iOS 6 size. If I use the PhoneGap Build debug tool to call alert(window.innerHeight);, the response I get back is 480.
Secondly, the app isn't responding to any touch events. Again, if I use the debug tool, I can pass click events to the app and it responds as expected, so I know the app is responsive, but if I try to perform the same event on the device, nothing happens.
I'm sure these are probably common issues, but I can't seem to figure them out! The same app works perfectly on Andoird, which makes me suspect it's a configuration issue. For reference, my config.xml looks like:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.xxxxxx.walkingguide"
versionCode="100"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>XXXXXXXXXXXX Walking Guide</name>
<description>
Find your way around our campuses, and find out more about our buildings.
</description>
<author href="http://www.axxxxxxxsign.co.uk" email="hello#xxxxxxxxx.co.uk">
XXXXX XXXXXX
</author>
<preference name="phonegap-version" value="3.3.0" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<preference name="detect-data-types" value="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="android-installLocation" value="auto" />
<preference name="auto-hide-splash-screen" value="false" />
<preference name="splash-screen-duration" value="10000" />
<icon src="icon.png" />
<!-- iPhone and iPod touch -->
<gap:splash src="images/splash-ios" gap:platform="ios" width="320" height="480" />
<gap:splash src="images/splash-ios#2x.png" gap:platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="images/splash-568h#2x.pnh" gap:platform="ios" width="640" height="1136" />
<gap:splash src="images/android-splash.9.png" gap:platform="android" />
<gap:plugin name="org.apache.cordova.geolocation" version="0.3.6" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.7" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.media-capture" version="0.2.8" />
<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />
<access origin="*" />
</widget>

Answer 1

Having looked into this further, the problem is related to how iOS 7 treats the status bar.
By default, the status bar sits over the top of the WebView, and apparently means the app can't be interacted with (not sure if this happens on all apps, but I tried it with both my app and a simple demo app and had the same problems).
There is a PhoneGap Plugin (also available on PhoneGap Build) that allows you to hide the status bar - https://github.com/phonegap-build/StatusBarPlugin
Following that and setting up the configs
<gap:config-file platform="ios" parent="UIStatusBarHidden">
<true/>
</gap:config-file>
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
<false/>
</gap:config-file>
The status bar is hidden, and everything appears to work as it should.

Answer 2

Try adding the below to your app. It will set the height and width to the ones supported by the device.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />