Phonegap Cordova - 全屏后底部出现黑色状态栏

Question

我记得这个问题已经存在很长时间了。我原以为是手机或模拟器的问题，但在发布我的应用后，我仍然看到屏幕底部的黑色矩形，看起来像状态栏。

当我在config.xml中添加以下内容时，就会出现这种情况：

<preference name="android-build-tool"      value="gradle"   />   
<preference name="Fullscreen"              value="true"     />
<preference name="Orientation"             value="portrait" />

截图:

更新

我注意到如果我最小化游戏并立即点击它，底部的黑色条会消失（奇怪）。

我尝试创建一个新项目，在config.xml中设置全屏偏好后，同样的情况发生。

似乎顶部的栏转移到了底部 >_>

- tery.blargh

---

你能提供有关Cordova版本、Android版本和任何框架的详细信息吗？ - Mark

你找到解决方案了吗？我也有完全相同的问题。 - rockstardev

@coderama 可能听起来有点疯狂，但你可以尝试设置适当大小的启动图片并检查一下，因为这可能会导致 iOS 出现问题。 - Gandhi

这个问题特别发生在我的Android设备上。我还没有测试过IOS。我为这个问题添加了赏金，并开始了另一个问题，总结了我的努力，链接在这里-->https://dev59.com/eZfga4cB1Zd3GeqPDO84... 我不可能是唯一遇到这个问题的人... - rockstardev

Answer 1

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

我最初认为是Android状态栏的问题，但经过研究，我现在非常确信，这个问题来自于某些其他的Android系统UI没有在Cordova包装器完成初始化之前隐藏，导致包装器的大小计算错误。

经过长时间的搜索和尝试几乎所有你提到的方法，我偶然发现了一个插件：

cordova-plugin-fullscreen

现在我正在使用它在config.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以及硬件导航和软件导航设备。也许这对您有所帮助。

- devjsp

---

全屏插件对我有效，但需要在deviceready函数中使用另一个功能。if (window.AndroidFullScreen) { window.AndroidFullScreen.showSystemUI(); window.AndroidFullScreen.immersiveMode(); }适用于Android 4.4.2。 - zamuka

@zamuka的解决方案在我的6.0三星j5上有效，但在onDeviceReady中无效 - 使用setTimeout稍后在加载过程中可以正常工作。 - MStoner

Answer 2

您可以使用cordova钩子将android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen"修复应用到AndroidManifest.xml中，或者您可以在cordova@6.4.0开始的config.xml中使用<edit-config>：

<widget ... xmlns:android="http://schemas.android.com/apk/res/android"> ... <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:theme="@android:style/Theme.NoTitleBar.Fullscreen" /> </edit-config> ... </widget>

来源：Cordova全屏启动画面在Android上仍然显示标题栏

- daniil_

Answer 3

默认情况下，DOM只会填充渲染其内容所需的空间。将元素设置为height:100%;是相对于其父元素的高度设置其高度。如果您希望可见元素的高度与屏幕高度相同，则可以将元素设置为height:1vh;，这是屏幕的高度。但这可能会导致一些意外的滚动行为，因此另一种方法是从html文档开始设置所有父元素的height:100%;。

在css中：

html, body, ... other parent elements ... {
   height:100%;
}

- tnt-rox

---

1vh 意味着屏幕高度的 1%。要实际适应整个屏幕高度，它将是 100vh ;) - Hezad

Answer 4

看起来问题出在定义画布的尺寸上。我一段时间前解决了这个问题，所以我不确定这是否是解决方法：

var c  = document.getElementById("canvas1");
var ctx  = c.getContext("2d");
var pixelRatio = window.devicePixelRatio || 1; // get pixel ratio of device
c.width = window.screen.width * pixelRatio;
c.height = window.screen.height * pixelRatio;
c.style.width = window.screen.width + 'px';
c.style.height = window.screen.height + 'px';

还可以尝试删除你的index.css文件

- tery.blargh

---

你能详细解释一下这段代码吗？canvas1是什么？是显示可见信息的第一个div吗？ - rockstardev

我得到了“c.getContext不是一个函数”的错误。 - rockstardev

canvas1 是我在 HTML 中定义的画布 ID。请将您的画布 ID 替换为 canvas1。 - tery.blargh

Answer 5

你可能想要轮询显示/画布尺寸的更改。

那个黑色带子看起来大约和系统顶部状态栏的大小相同，所以我怀疑你的应用程序在系统移除/动画化状态栏之前刚好接收到视口大小。

- John Valentine

---

我有完全相同的问题，但只是偶尔发生。我尝试了一整天来解决这个问题，我的看法和你一样，那就是 Cordova 在 Android 移除导航栏之前请求了高度，导致呈现画布太小。你已经找到任何解决方法了吗？ - devjsp

我找到了一个适合我的解决方案，详见我的回答。 - devjsp

Answer 6

我有同样的问题。使用 Cordova 状态栏插件解决了我的问题： http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-statusbar/index.html#installation 安装插件：

cordova plugin add cordova-plugin-statusbar

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

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

调用 JavaScript 中的 StatusBar.hide() 方法即可隐藏状态栏。示例代码如下：

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

比较截图 - 更改前后对比

- PocketCityGame

---

jQuery文档准备就绪的部分并不是必需的，但除此之外，这对我来说很有效。 - camomileCase

Answer 7

我遇到了同样的问题。这种情况在横屏模式下发生的可能性更大。 我有一部三星S7和一部三星Tab2。 在S7上，它每20次中出现一次； 在Tab2上，它总是发生。 我可以通过检查正文高度与屏幕高度（与像素比相关）之间的关系来检测是否有问题。

我应用了AndroidFullScreen和技巧。 到目前为止，所有问题都已在平板电脑上解决，底部不再有黑色条纹。但对于S7，我仍然有这个问题。 S7的像素比为4，而Tab2的像素比为1。

- Charles Jeremy Colnet