Question

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

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

此外，我的桌面计算机上的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 =设备高度（不起作用）

似乎有更多的建议：“是的，这是一个jquery移动问题。只要视口大小发生变化，就会设置样式。”

为此，我尝试设置CSS：

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

没用......

所以我想，也许我可以“愚弄”应用程序调整窗口大小，这可能会有效。所以我尝试添加这个：

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

没用。

然后我觉得没问题，也许这是我代码中的其他内容。所以我将整个文件剥离到一个只有一个索引div的非常准确的文件。它仍然发生了。

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

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

并将其更改为：

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

这没什么区别。

我还确保我拥有所有内容的最新版本（我也这样做）。我有：

jQuery Mobile Version 1.4.5
jQuery v1.11.2

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

所以我真的没有选择。任何能够给我任何关于我错过了什么设置或者我做错了什么的线索的人都会在我的应用程序的底部显示这个令人讨厌的酒吧，这将是我的英雄。有什么建议吗？

Answer 1

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

我最初想到的是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和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在应用程序底部添加了不应该存在的栏？

3 个答案:

安装

Config.xml设置