ios - archivo - cordova-plugin-wkwebview-engine

¿Por qué mi Cordova WebView tiene 20px adicionales de desplazamiento?

Question

Estoy creando una aplicación Cordova y la estoy probando en mi dispositivo con iOS 6 (iPod Touch w / iOS 6.1.6). Por alguna razón, la vista web es desplazable con 20px adicionales, aparentemente compensando la barra de estado de 20px en la parte superior de la pantalla. A veces, esto hace que la vista web desplazable se enfoque, esencialmente causando que "nada" se desplace en los ojos del usuario, en lugar de permitir que los div s desplazables en mi aplicación se desplacen. He intentado numerosas correcciones relacionadas con cambios en config.xml, complementos, etc., pero nada marca la diferencia, como he descrito a continuación.

1. Intenté ocultar manualmente la barra de estado , sin ningún efecto.

   // config.xml:
   <plugin name="org.apache.cordova.statusbar" version="0.1.7" />
   
   <feature name="StatusBar">
     <param name="ios-package" value="CDVStatusBar" />
   </feature>
   
   // index.js (ondeviceready):
   window.StatusBar && window.StatusBar.hide();

2. Intenté forzar la barra de estado para superponer la vista web, esencialmente haciendo que la aplicación tenga una altura total de 480 píxeles (en lugar de 460 píxeles):

   // config.xml:
   <plugin name="org.apache.cordova.statusbar" version="0.1.7" />
   
   <preference name="StatusBarOverlaysWebView" value="true" />

3. Intenté forzar la barra de estado para no superponer la vista web :

   // config.xml:
   <plugin name="org.apache.cordova.statusbar" version="0.1.7" />
   
   <preference name="StatusBarOverlaysWebView" value="false" />
   <preference name="StatusBarBackgroundColor" value="#000000" />
   <preference name="StatusBarStyle" value="lightcontent" />

4. Intenté compensar la parte superior del margen del cuerpo en 20 px, lo que solo añade un extra de 20 px de espacio en blanco muerto:

   // index.css:
   body {
     margin-top: 20px;
   }

5. Intenté configurar la aplicación en fullscreen , lo que literalmente no tiene ningún efecto en la aplicación en absoluto:

   // config.xml:
   <preference name="Fullscreen" value="true" />

6. Incluso utilicé el inspector de Safari para eliminar el nodo DOM del body completo, y aún se desplaza 20px, diciéndome que no tiene nada que ver con el HTML tanto como la implementación de WebView por Cordova.

¿Alguien tiene una solución para esto? No puedo ser el único por ahí que encuentre esto.

Answer 1

¿Has probado esto en deviceready?

window.StatusBar.overlaysWebView(false);

https://github.com/apache/cordova-plugin-statusbar/blob/master/doc/index.md

Answer 2

Ionic + AngularJs

.run([''$rootScope'', ''$state'', function ($rootScope, $state) {
            //set status bar 
            $cordovaStatusbar.styleHex(''#637386'');
            $cordovaStatusbar.overlaysWebView(true);

            $rootScope.$on(''$stateChangeStart'',
                function(event, toState, toParams, fromState, fromParams) {
                    //for me was helpful this call
                    $cordovaStatusbar.overlaysWebView(true);

                });
}])

Answer 3

Lo descubrí después de casi 8 horas de retoques. Tenía que reemplazar la configuración de meta viewport de esto:

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

a esto:

<meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

Parece que height=device-height estaba teniendo en cuenta la altura completa del dispositivo, incluida la barra de estado. Vi una forma de solucionar esto en JavaScript para aquellos que están interesados, que está cubierta por esta respuesta de . Sin embargo, no veo ningún inconveniente en la eliminación total (para una aplicación Cordova dirigida a iOS 6+).