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

【问题标题】：Phonegap Cordova - Black status bar on bottom after fullscreenPhonegap Cordova - 全屏后底部的黑色状态栏
【发布时间】：2016-07-22 23:48:19
【问题描述】：

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

这发生在我的 config.xml 中有这个之后

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

截图：

更新

我注意到如果我MINIMIZE游戏并直接点击它，底部的黑条消失了（奇怪）。

我尝试创建一个新项目，但将全屏首选项放入 config.xml 后，同样的事情发生了。

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

【问题讨论】：

您能提供有关cordova版本、android版本、任何框架等的详细信息吗？
您找到解决方案了吗？我有完全相同的问题。
@coderama 听起来可能很疯狂，但您可以尝试设置适当大小的启动 iamges 并检查一次，因为这会导致 iOS 出现问题
这在 Android 中特别发生在我身上。我还没有开始测试IOS。我为这个问题添加了赏金并开始了另一个问题，在这里总结了我的努力 --> stackoverflow.com/questions/37768186/… ...我不能成为唯一的坚持者...

标签： javascript android cordova config statusbar

【解决方案1】：

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

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

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

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 上进行了测试。也许这对你也有帮助。

【讨论】：

全屏插件对我有用，但在 deviceready if (window.AndroidFullScreen) { window.AndroidFullScreen.showSystemUI(); window.AndroidFullScreen.immersiveMode(); } Android 4.4.2 上有另一个功能
@zamuka 的解决方案在 6.0 Samsung j5 上对我有用，但在 onDeviceReady 中不起作用 - 稍后使用 setTimeout 在加载过程中运行良好

【解决方案2】：

您可以使用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>

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

1vh 表示屏幕高度的 1%。要真正适合整个屏幕高度，它将是 100vh ;)

【解决方案4】：

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

黑色条带看起来与系统顶部状态栏的大小大致相同，因此我怀疑您的应用在状态栏被系统删除/动画之前接收到视口大小。

【讨论】：

我有完全相同的问题，但只是偶尔发生。我尝试了一整天来解决这个问题，并且持相同的观点，即 Cordova 在 Android 移除栏之前请求高度，导致渲染画布太小。您是否已经找到任何解决方案？
找到了适合我的解决方案，详情请参阅我的答案。

【解决方案5】：

似乎问题在于定义画布的尺寸。不久前解决了这个问题，所以我不确定这是否是修复它的原因：

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

【讨论】：

你能详细说明一下这段代码吗？什么是canvas1？显示可查看信息的第一个 div？
我得到“c.getContext 不是函数”。
canvas1 是我在 HTML 中定义的画布的 ID。而不是canvas1，放入你的画布的id

【解决方案6】：

我遇到了同样的问题。使用科尔多瓦状态栏插件为我修复了它： 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

【讨论】：

jQuery 文档就绪位不是必需的，否则这对我来说效果很好。

【解决方案7】：

我也面临同样的问题。对我来说，它主要发生在横向模式下。我有三星 s7 和三星 tab2。在 s7 上发生了 20 多次在 tab2 上它一直在发生。我可以通过检查身体高度与屏幕高度（与像素比相关）来检测何时出现问题

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

【讨论】：