iOS7 和 PhoneGap 构建 - 应用高度和触摸响应

Question

我刚刚使用 PhoneGap 构建了一个应用程序，在 iOS7 上运行。构建很顺利，安装也很好，但是有些问题我想不通。

首先，应用高度不是全尺寸 - 看起来是 c。 iOS 6 大小。如果我使用 PhoneGap Build 调试工具调用 alert(window.innerHeight);，我得到的响应是 480。

其次，应用程序没有响应任何触摸事件。同样，如果我使用调试工具，我可以将点击事件传递给应用程序，它会按预期响应，所以我知道应用程序是响应式的，但是如果我尝试在设备上执行相同的事件，则什么也不会发生。

我确信这些可能是常见问题，但我似乎无法弄清楚！相同的应用程序在 Andoird 上完美运行，这让我怀疑这是一个配置问题。作为参考，我的 config.xml 看起来像：

<?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

进一步研究后，问题与 iOS 7 如何处理状态栏有关。

默认情况下，状态栏位于 WebView 的顶部，显然意味着无法与应用程序交互（不确定是否所有应用程序都会发生这种情况，但我在我的应用程序和一个简单的演示中都试过了应用程序并遇到同样的问题）。

有一个 PhoneGap 插件（也可在 PhoneGap Build 上使用），可让您隐藏状态栏 - https://github.com/phonegap-build/StatusBarPlugin

然后设置配置

<gap:config-file platform="ios" parent="UIStatusBarHidden">
    <true/>
</gap:config-file>

<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
    <false/>
</gap:config-file>    

状态栏已隐藏，一切正常。

Answer 2

尝试将以下内容添加到您的应用中。它会将高度和宽度设置为设备支持的高度和宽度。

<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" />