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

Question

从我记事起，我就一直遇到这个问题。我以为它可能只是来自我的 phone 或仿真，但在发布我的应用程序后，我仍然在屏幕底部看到这个黑色矩形，看起来像状态栏。

这发生在我的 config.xml

中有这个之后

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

截图：

更新

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

我尝试创建一个新项目，当我将全屏首选项设置为 config.xml 时，同样的事情发生了。

好像顶栏转移到了底栏>_>

Answer 1

似乎问题出在定义 canvas 的维度上。不久前解决了这个问题，所以我不确定这是否是解决问题的方法：

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 文件

Answer 2

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

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

Answer 3

您可能想要轮询 display/canvas 大小以进行更改。

那个黑带看起来和系统顶部状态栏的大小差不多，所以我怀疑你的应用程序在状态栏被系统 removed/animated 之前收到视口大小。

Answer 4

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

我最初想到的是 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 硬件导航和软件导航设备进行测试。也许这对你也有帮助。

Answer 5

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

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

来源：

Answer 6

我遇到了同样的问题。对我来说，它主要发生在横向模式下。我有三星 s7 和三星 tab2。在 s7 上它发生一次超过 20 次在 tab2 上，它一直在发生。我可以通过检查 body 高度与屏幕高度（与像素比相关）

来检测何时出现问题

我应用了 AndroidFullScreen 和技巧到目前为止，一切都固定在平板电脑上，底部不再有黑条。但是对于 s7 我仍然有这个问题。 s7的像素比为4 tab2的像素比为1

Answer 7

我遇到了同样的问题。使用 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" />

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

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

Camparison Screenshot - Before and After

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

Phonegap Cordova - Black status bar on bottom after fullscreen

javascript

android

config

statusbar

cordova