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

Question

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

在我的config.xml中有这个之后会发生这种情况

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

截图：

更新

我注意到，如果我 MINIMIZE 游戏，那么黑色底部会消失，然后再点击它（很奇怪）。

我尝试创建一个新项目，一旦我将全屏首选项放在config.xml中，就会发生同样的事情。

顶部栏似乎转移到底部＆gt; _＆gt;

Answer 1

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

我最初想到的是Android状态栏，但对该主题进行了一些研究，现在得到了一个非常强烈的信念，这个问题来自其他一些Android系统UI，直到Cordova包装器完成初始化后才被隐藏，导致包装器的计算尺寸错误。

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

cordova-plugin-fullscreen

我现在在config.xml中使用它

config.xml

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

上触发的方法的第一次播放中

deviceready

到目前为止已经使用Android 6.0,5.0.1测试了硬件导航和软件导航设备。也许这可以帮助你。

Answer 2

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

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

Answer 3

您可能希望轮询显示/画布大小以进行更改。

黑色乐队看起来与系统的顶级状态栏大小相同，所以我怀疑你的应用程序在状态栏被系统删除/动画之前接收到视口大小。

Answer 4

您可以使用cordova挂钩将android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen"修正应用于AndroidManifest.xml，也可以使用<edit-config> config.xml 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>：

<form [formGroup]="projectEditForm" novalidate> <div [formGroup]="projectEditForm"> <label>Title</label> <input type="text" [class.validationError]="projectEditForm.controls.Title.invalid && (projectEditForm.controls.Title.dirty || submitted)" value="{{ (project | async)?.ProjectName }}" formControlName="Title"> <label>Description</label> <textarea [class.validationError]="projectEditForm.controls.Description.invalid && (projectEditForm.controls.Description.dirty || submitted)" value="{{ (project | async)?.Description }}" formControlName="Description"></textarea> </div> </form>

来源：Cordova fullscreen splash screen on Android still shows title bar

Answer 5

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

Answer 6

似乎问题在于定义画布的尺寸。刚刚解决了这个问题所以我不确定这是不是解决了这个问题：

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 7

我面临同样的问题。它主要发生在横向模式中。 我有一个三星s7和一个三星tab2。 在s7上，它发生一次超过20次 在tab2上它始终发生。 我可以通过检查身高与屏幕高度（与像素比率相关）来检测出错的时间

我应用了AndroidFullScreen和技巧 到目前为止，所有内容都固定在平板电脑上，底部没有更暗的条形。但是对于s7，我仍然有这个问题。 s7的像素比率为4，tab2的像素比率为1