Search code examples
javascriptandroidcordovaconfigstatusbar

Phonegap Cordova - Black status bar on bottom after fullscreen

I've been having this issue for as long as I can remember. I thought it might have just been from my phone or the emulation, but after publishing my app I still see this black rectangle at the bottom of screen, which looks like the status bar.

This happens after I have this in my config.xml

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

Screenshot:

enter image description here

UPDATE

I noticed the bottom black bar goes away if I MINIMIZE the game and click it right back up (weird).

I tried creating a new project and same thing happens once I put the full screen preference in config.xml.

It seems like the top bar transfers to the bottom >_>

Solution

  • Seems that the problem is with defining the dimensions of the canvas. Solved this a while ago so I'm not sure if this is what fixed it:

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

    Also try deleting your index.css file