Android Phonegap Compilations adds bar at the bottom of app that should not be there?

问题

I've looked everywhere and tried just about everything, but I can't get rid of this random black bar appearing at the bottom of my PhoneGap App. This is what I am seeing when I run the app:

The interesting part is that if I minimize the app and then open it again, it automatically fixes the display and the bottom bar disappears. But why?! How can I get it to not show this bar from the moment the app opens?

Also, this does not happen in Chrome on my desktop computer. It only happens after the app is compiled at build.phonegap.com.

WHAT I TRIED:

This question seems to describe exactly my problem, but I've tried everything discussed there but with no luck. It mentions that if you have:

<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>

That you should try:

Removing the viewport meta tag completely (did not work)
Only removing the "height" portion. I.e. height=device-height (did not work)

More advice there seems to say: "Yes, it's a jquery mobile issue. The style is set whenever the viewport size changes."

For this I tried setting CSS:

 .ui-page-active {
     height: 100% !important;
     min-height: 100% !important;
 }

Did not work...

So then I thought, maybe if i can "fool" the app into resizing the window, that might work. So I tried adding this:

$(window).trigger("resize");

Did not work.

Then I thought okay, maybe it's something else in my code. So I stripped down the entire file to a VERY barebones file with ONLY one index div. And it STILL happened.

I also tried fiddling with config.xml. I edited this:

<preference name="fullscreen"                 value="true" />

And changed it to:

<preference name="fullscreen"                 value="false" />

This made no difference.

I also made sure I have the latest versions of everything (and I do). I have:

jQuery Mobile Version 1.4.5
jQuery v1.11.2

I also found this post describing the same thing. But no solution there either. (Even offered a bounty on there with the hope of drawing some attention)

So I'm really out of options here. Anyone who could give me any clues as to what setting I am missing or what I am doing wrong that is causing this annoying bar to show up at the bottom of my app, would be my hero. Any advice?

回答1:

I experienced the very same issue using only <preference name="Fullscreen" value="true" /> in my config.xml.

I initially thought of the Android status bar, but had some research on that topic and now got a very strong believe, that this issue comes from some other Android system UI not being hidden until the Cordova wrapper finished init, resulting in a wrong calculated size for the wrapper.

After a long search and trying out nearly everything you also mentioned in your other thread, I stumbled upon a plugin:

https://github.com/mesmotronic/cordova-plugin-fullscreen

I'm now using this in the confix.xml

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

And this directly in first playe of the method triggered on 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();
}

Tested so far with Android 6.0, 5.0.1 with harware navigation and software navigation devices. Maybe that could help you aswell.

回答2:

I am making a JS game using Phaser 2.6.2 and Cordova 6.3.1. I implemented all of @devjsp's suggestions but it didn't change anything for me, even though I thought it was working at first.

Edit: I originally had a different solution, but it did not work.

The issue is the title bar (an android specific construction) is not being hidden. @devjsp's suggestions all target the status bar. To fix this, I keep the fullscreen preference (not the plugin) to hide the status bar. Then I added the cordova-custom-config plugin to allow me to easily edit platform specific files from my config.xml. Then I turned off the titlebar in my config.xml.

Installation

cordova plugin add cordova-custom-config -save

Config.xml Setup

<preference name="fullscreen" value="true" /> <!-- Keep this -->

<platform name="android">
    <!-- cordova-custom-config plugin pref below -->
    <preference name="android-manifest/application/activity/@android:theme" value="@android:style/Theme.Black.NoTitleBar" />
    <!-- ... -->
</platform>

You can check that the title bar preference works successfully by building the application, opening platforms/android/AndroidManifest.xml and searching for the android:theme="@android:style/Theme.Black.NoTitleBar" string.

Update: It looks like Cordova 6.4.0 adds support for edit-config, which should replace the custom-config plugin. Haven't had time to play with it, but you can read the release notes here, and the edit-config documentation here.

回答3:

I had the exact same problem, fixed by not using the full screen setting at all and instead using the cordova status bar plugin: http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-statusbar/index.html#installation

Camparison Screenshot - Before and After

Install the plugin:

cordova plugin add cordova-plugin-statusbar

Remove the fullscreen setting in config.xml and add the plugin instead:

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

Call the StatusBar.hide() to hide the status bar in JavaScript. Example:

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

来源：https://stackoverflow.com/questions/37768186/android-phonegap-compilations-adds-bar-at-the-bottom-of-app-that-should-not-be-t

标签

android

cordova

jquery-mobile