Ipad 上仅限 Iphone 的应用程序在顶部显示一个空白的白条

Question

我有一个仅使用 sencha touch 和 cordova 的 iPhone 应用程序，它功能齐全，在 iphone 上没有任何问题。当我在 Ipad 上运行它时，它会在通常显示状态栏的顶部显示一个空白的白色屏幕。它缩放到适当的高度，即 460 像素，但顶部有一个白条。当我在 iPhone 甚至 iPad 模拟器上运行它时，它不会出现 - 只有当我在实际的 iPad 设备上运行它时，才会出现白条并在所有页面上看到。任何人都知道我怎样才能摆脱这个白条？我也尝试在 index.html 中设置视口，但这也不起作用。

<meta name="viewport" content="initial-scale=1.0">

也试过了

<feature name="StatusBar">
            <param name="ios-package" value="CDVStatusBar" onload="false" />
        </feature>

在cordova config.xml中但没用。

除此之外，整个应用程序运行良好，没有任何问题。

Answer 1

苦苦挣扎了两天，终于找到了答案。由于我的项目使用的是 cordova 状态栏插件，我可以通过调整我的 index.html 来自定义状态栏。因此，对于遇到相同问题的任何人，在仅 iPhone 的应用程序中，您的应用程序页面上方会显示一个空白的白色状态栏，这里的链接可以解决您的问题：http://www.joshmorony.com/take-complete-control-of-the-ios-status-bar-with-phonegap-build/

所以我所要做的就是在我的 index.html 中添加 StatusBar.backgroundColorByName("black") 行。因此状态栏显示为黑色并与背景黑色合并，而应用程序完美可见。这样做的缺点是，即使在 iPhone 上，我的状态栏也会出现黑色背景，这是我不想要的，所以我不得不设置一个 if 条件来检查设备类型。这是我解决问题的全部代码：

<script src="touch/sencha-touch-all.js">
    </script>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
    <script>
    document.addEventListener('deviceready', function() {
        setTimeout(function() {
            navigator.splashscreen.hide();
            //StatusBar.styleDefault();
            if(Ext.os.is.Tablet)
                {
                    StatusBar.backgroundColorByName("black");
                }
            else
            {
                StatusBar.styleDefault();
            }

        }, 1000);
    });
    </script>