Android Phonegap Compilations 在应用程序底部添加了本不应存在的栏？

Question

我到处查看并尝试了几乎所有方法，但我无法摆脱出现在我的 PhoneGap 应用程序底部的这个随机黑条。这是我在运行应用程序时看到的内容：

有趣的是，如果我最小化应用程序然后再次打开它，它会自动修复显示并且底栏消失。但为什么？！如何让它在应用程序打开时不显示此栏？

另外，在我的台式电脑 Chrome 中不会发生这种情况。它只发生在应用程序在 build.phonegap.com 编译之后。

我尝试了什么：

This question 似乎准确地描述了我的问题，但我已经尝试了那里讨论的所有内容，但没有成功。它提到如果你有：

<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>

你应该试试：

完全删除视口元标记（无效）
仅删除 "height" 部分。 IE。 height=device-height（没用）

似乎还有更多建议："Yes, it's a jquery mobile issue. The style is set whenever the viewport size changes."

为此我尝试设置 CSS:

 .ui-page-active {
     height: 100% !important;
     min-height: 100% !important;
 }

没用...

然后我想，也许如果我可以 "fool" 调整应用程序 window 的大小，那可能会奏效。所以我尝试添加这个：

$(window).trigger("resize");

没有成功。

然后我想好吧，也许这是我的代码中的其他内容。所以我将整个文件剥离为一个非常准系统的文件，只有一个索引 div。它仍然发生了。

我也试过摆弄config.xml。我编辑了这个：

<preference name="fullscreen"                 value="true" />

并将其更改为：

<preference name="fullscreen"                 value="false" />

这没什么区别。

我还确保我拥有所有内容的最新版本（我确实拥有）。我有：

jQuery手机版1.4.5
jQuery v1.11.2

我还发现描述了同样的事情。但那里也没有解决方案。（甚至在那里提供赏金，希望引起一些注意）

所以我真的别无选择。任何人都可以给我任何关于我缺少什么设置或我做错了什么导致这个烦人的栏出现在我的应用程序底部的线索，将是我的英雄。有什么建议吗？

Answer 1

我在 config.xml 中仅使用 <preference name="Fullscreen" value="true" /> 时遇到了同样的问题。

我最初想到的是 Android 状态栏，但对该主题进行了一些研究，现在非常坚信这个问题来自其他 Android 系统 UI 在 Cordova 包装器完成初始化之前不会被隐藏，导致包装器的计算大小错误。

经过长时间的搜索并尝试了您在其他主题中提到的几乎所有内容后，我偶然发现了一个插件：

https://github.com/mesmotronic/cordova-plugin-fullscreen

我现在在 confix.xml

中使用它

<preference name="Fullscreen" value="true" />
<preference name="AndroidLaunchMode" value="singleInstance" />
<preference name="DisallowOverscroll" value="true" />
<preference name="KeepRunning" value="true" />

这直接在 deviceready

上触发的方法的第一个播放器中

if (AndroidFullScreen) {
    // Extend your app underneath the status bar (Android 4.4+ only)
    AndroidFullScreen.showUnderStatusBar();

    // Extend your app underneath the system UI (Android 4.4+ only)
    AndroidFullScreen.showUnderSystemUI();

    // Hide system UI and keep it hidden (Android 4.4+ only)
    AndroidFullScreen.immersiveMode();
}

目前已使用 Android 6.0、5.0.1 硬件导航和软件导航设备进行测试。也许这对你也有帮助。

Answer 2

我正在使用 Phaser 2.6.2 和 Cordova 6.3.1 制作 JS 游戏。我实施了@devjsp 的所有建议，但它对我没有任何改变，即使我认为它一开始是有效的。

编辑：我本来有一个不同的解决方案，但没有奏效。

问题是标题栏（android 特定结构）没有被隐藏。 @devjsp 的建议都针对状态栏。为了解决这个问题，我保留了全屏首选项（不是插件）来隐藏状态栏。然后我添加了 cordova-custom-config 插件以允许我从我的 config.xml 轻松编辑特定于平台的文件。然后我关闭了 config.xml.

中的标题栏

安装

cordova plugin add cordova-custom-config -save

Config.xml 设置

<preference name="fullscreen" value="true" /> <!-- Keep this -->

<platform name="android">
    <!-- cordova-custom-config plugin pref below -->
    <preference name="android-manifest/application/activity/@android:theme" value="@android:style/Theme.Black.NoTitleBar" />
    <!-- ... -->
</platform>

您可以通过构建应用程序、打开 platforms/android/AndroidManifest.xml 并搜索 android:theme="@android:style/Theme.Black.NoTitleBar" 字符串来检查标题栏首选项是否成功。

更新： 看起来 Cordova 6.4.0 增加了对 edit-config 的支持，它应该取代 custom-config 插件。还没来得及玩，不过可以看看release notes here, and the edit-config documentation here.

Answer 3

我遇到了完全相同的问题，通过根本不使用全屏设置而是使用 cordova 状态栏插件来解决：http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-statusbar/index.html#installation

Camparison Screenshot - Before and After

安装插件：

cordova plugin add cordova-plugin-statusbar

删除 config.xml 中的全屏设置并改为添加插件：

<plugin name="cordova-plugin-statusbar" spec="2.2.2" />

调用 StatusBar.hide() 隐藏 JavaScript 中的状态栏。示例：

$(document).ready(function(){
    document.addEventListener("deviceready", function(){
        StatusBar.hide();
    }, false);
});

Android Phonegap Compilations 在应用程序底部添加了本不应存在的栏？

Android Phonegap Compilations adds bar at the bottom of app that should not be there?

android

jquery-mobile

cordova

安装

Config.xml 设置