Phonegap Cordova – Barra de estado negra en la parte inferior después de la pantalla completa

He experimentado el mismo problema utilizando sólo <preference name="Fullscreen" value="true" /> en mi config.xml .

Al principio pensé en la barra de estado de Android, pero tenía algunas investigaciones sobre ese tema y ahora tengo una muy fuerte creer, que este problema proviene de algún otro sistema de interfaz de usuario de Android no se oculta hasta que el envoltorio de Cordova terminó init, resultando en un tamaño calculado equivocado Para el envoltorio.

Después de una larga búsqueda y probando casi todo lo que usted también mencionó, tropecé con un plugin:

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

Ahora estoy usando esto en el archivo confix.xml

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

Y esto directamente en el primer juego del método activado en 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(); } 

Probado hasta ahora con Android 6.0, 5.0.1 con navegación de harware y dispositivos de navegación de software. Tal vez eso podría ayudarte también.

Por defecto, el DOM solo llenará el espacio requerido para renderizar su contenido. Establecer una height:100%; elemento height:100%; Es establecer su altura en relación con la altura de su elemento primario. Si desea que el elemento visible sea la altura de la pantalla, puede configurar la height:1vh; del elemento height:1vh; Que es la altura de la pantalla. Esto podría causar algún comportamiento de desplazamiento inesperado aunque, por lo que otro método es establecer todos los elementos primarios height:100%; , Comenzando por el documento html. En css:

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

Es posible que desee consultar el tamaño de la pantalla / lienzo para los cambios.

Esa banda negra parece tener el mismo tamaño que la barra de estado superior del sistema, así que sospecho que su aplicación está recibiendo el tamaño de la ventana de vista justo antes de que la barra de estado sea removida / animada por el sistema.

Puedes usar cordova hooks para aplicar el android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen" fijar a AndroidManifest.xml o puedes usar <edit-config> en config.xml comenzando con [email protected] :

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

Fuente: Cordova fullscreen pantalla de bienvenida en Android todavía muestra barra de título

Parece que el problema está en definir las dimensiones del lienzo. Resuelto esto hace un tiempo así que no estoy seguro si esto es lo que lo arregló:

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

También intenta eliminar el archivo index.css

Estoy enfrentando el mismo problema. Sucede principalmente en modo de paisaje para mí. Tengo una samsung s7 y una samsung tab2. En el s7 sucede una vez más de 20 veces en la tab2 sucede todo el tiempo. Puedo detectar cuando algo está mal comprobando la altura del cuerpo frente a la altura de la pantalla (en correlación con la relación de píxeles)

He aplicado el AndroidFullScreen y el truco Hasta ahora todo está fijado en la tableta, no más barra oscura en la parte inferior. Pero para el s7 todavía tengo este problema. El s7 tiene una relación de píxeles de 4 la lengüeta2 la relación de píxeles es 1

Yo tuve el mismo problema. Usar el complemento de la barra de estado cordova lo arregló para mí: http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-statusbar/index.html#installation

Instale el complemento:

 cordova plugin add cordova-plugin-statusbar 

Elimine la configuración de pantalla completa en config.xml y agregue el complemento en su lugar:

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

Llame a StatusBar.hide () para ocultar la barra de estado en JavaScript. Ejemplo:

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

Captura de pantalla de Camparison – Antes y Después