ios - not - descargar cordova phonegap

La aplicación Cordova no se muestra correctamente en el iPhone X(simulador) (8)

Hay 3 pasos que debes hacer

para la barra de estado de iOs 11 y los problemas de encabezado de iPhone X

1. Cubierta de ajuste de la ventana gráfica

Agregue viewport-fit=cover al meta de su viewport en <header>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

Demostración: https://jsfiddle.net/gq5pt509 (index.html)

Agregue más imágenes de bienvenida a su config.xml dentro de <platform name="ios">

No omita este paso , esto es necesario para que la pantalla se ajuste al trabajo del iPhone X

Demostración: https://jsfiddle.net/mmy885q4 (config.xml)

Arregla tu estilo en CSS

Utilice safe-area-inset-left , safe-area-inset-right , safe-area-inset-top o safe-area-inset-bottom

Ejemplo: (¡Úselo en su caso!)

#header { position: fixed; top: 1.25rem; // iOs 10 or lower top: constant(safe-area-inset-top); // iOs 11 top: env(safe-area-inset-top); // iOs 11+ (feature) // or use calc() top: calc(constant(safe-area-inset-top) + 1rem); top: env(constant(safe-area-inset-top) + 1rem); // or SCSS calc() $nav-height: 1.25rem; top: calc(constant(safe-area-inset-top) + #{$nav-height}); top: calc(env(safe-area-inset-top) + #{$nav-height}); }

Bonificación: puede agregar clases de cuerpo como is-android o is-ios en deviceready

var platformId = window.cordova.platformId; if (platformId) { document.body.classList.add(''is-'' + platformId); }

Entonces puedes hacer algo como esto en CSS

.is-ios #header { // Properties }

Probé ayer mi aplicación basada en Cordova en el iPhone X Simulator en Xcode 9.0 (9A235) y no se veía bien. En primer lugar, en lugar de llenar el área de pantalla completa, había un área negra encima y debajo del contenido de la aplicación. Y lo que es peor, entre el contenido de la aplicación y el negro había dos barras blancas.

Agregar cordova-plugin-wkwebview-engine para que Cordova renderice usando WKWebView (no UIWebView) corrige las barras blancas. Mi aplicación no migra de UIWebView a WKWebView debido a problemas de rendimiento y pérdida de memoria cuando uso cordova-plugin-wkwebview-engine que ocurre al cargar imágenes descargadas de Inapp Purchase contenido alojado en un lienzo HTML5 ( file:// directo file:// acceso por el La vista web no es posible debido a restricciones de seguridad en WKWebView, por lo que los datos de la imagen deben cargarse a través de cordova-plugin-file ).

Estas capturas de pantalla muestran una aplicación de prueba con un fondo azul establecido en el <body >. Arriba y debajo de UIWebView, puede ver las barras blancas, pero no con WKWebView:

Ambas vistas web de Cordova exhiben las áreas negras en comparación con una aplicación nativa que llena el área de pantalla completa:

En mi caso, donde cada pantalla de presentación se diseñó individualmente en lugar de autogenerarse o presentarse en un formato de guión gráfico, tuve que seguir con la configuración de la pantalla de inicio de Legacy y agregar imágenes verticales y horizontales para orientar las orientaciones iPhoneX 1125 × 2436 a la configuración.xml al igual que:

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" /> <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

Después de agregarlos a config.xml ("viewport-fit = cover" ya estaba configurado en index.hml) mi aplicación creada con Ionic Pro llena toda la pantalla en dispositivos iPhoneX.

Encontré la solución a las barras blancas here :

Establezca viewport-fit=cover en la etiqueta viewme <meta> , es decir:

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

Las barras blancas en UIWebView luego desaparecen:

La solución para eliminar las áreas negras (proporcionadas por @dpogue en un comentario a continuación) es usar imágenes de LaunchStoryboard con cordova-plugin-splashscreen para reemplazar las imágenes de lanzamiento heredadas, utilizadas por Cordova por defecto. Para hacerlo, agregue lo siguiente a la plataforma iOS en config.xml :

Luego cree las imágenes con las siguientes dimensiones en res/screen/ios (elimine las existentes):

Default@2x~iphone~anyany.png - 1334x1334 Default@2x~iphone~comany.png - 750x1334 Default@2x~iphone~comcom.png - 1334x750 Default@3x~iphone~anyany.png - 2208x2208 Default@3x~iphone~anycom.png - 2208x1242 Default@3x~iphone~comany.png - 1242x2208 Default@2x~ipad~anyany.png - 2732x2732 Default@2x~ipad~comany.png - 1278x2732

Una vez que se eliminan las barras negras, hay otra cosa que debe abordar el iPhone X: la barra de estado es más grande que 20px debido a la "muesca", lo que significa que cualquier contenido en la parte superior de su aplicación Cordova se oscurecerá. :

En lugar de codificar un relleno en píxeles, puede manejar esto automáticamente en CSS utilizando las nuevas constantes safe-area-inset-* en iOS 11.

Nota: en iOS 11.0, la función para manejar estas constantes se llamaba constant() pero en iOS 11.2 Apple la renombró como env() ( ver aquí ), por lo tanto, para cubrir ambos casos, debe sobrecargar la regla CSS con ambos y confiar en Mecanismo de respaldo CSS para aplicar el apropiado:

body{ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }

El resultado es el deseado: el contenido de la aplicación cubre la pantalla completa, pero la "muesca" no lo oculta:

He creado un proyecto de prueba de Cordova que ilustra los pasos anteriores: webview-test.zip

Notas:

Botones de pie de página

Si su aplicación tiene botones de pie de página (como los míos), también necesitará aplicar safe-area-inset-bottom para evitar que se superpongan con el botón de inicio virtual en el iPhone X.
En mi caso, no pude aplicar esto a <body> ya que el pie de página está en una posición absoluta, por lo que necesitaba aplicarlo directamente al pie de página:

.toolbar-footer{ margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); }

cordova-plugin-statusbar

El tamaño de la barra de estado ha cambiado en el iPhone X, por lo que las versiones anteriores de cordova-plugin-statusbar muestran incorrectamente en el iPhone X
Mike Hartington ha creado esta solicitud de extracción que aplica los cambios necesarios.
Esto se fusionó con la versión [email protected] , así que asegúrese de estar utilizando al menos esta versión para aplicar a insertos de áreas seguras

Pantalla de bienvenida

Las restricciones del guión gráfico de LaunchScreen cambiaron en iOS 11 / iPhone X, lo que significa que la pantalla de bienvenida parecía "saltar" en el lanzamiento al usar versiones existentes del complemento ( ver aquí ).
Esto se capturó en el informe de error CB-13505 , se corrigió PR cordova-ios#354 y se publicó en [email protected] , así que asegúrese de estar utilizando una versión reciente de la plataforma cordova-ios .

orientación del dispositivo

Cuando se usa UIWebView en iOS 11.0, la rotación de vertical> horizontal> vertical hace que el safe-area-inset no se vuelva a aplicar, lo que hace que la muesca jms nuevamente el contenido (como se destaca por jms en un comentario a continuación).
También sucede si la aplicación se inicia en horizontal y luego se gira a vertical
Esto no sucede cuando se usa WKWebView a través de cordova-plugin-wkwebview-engine .
Informe de radar: http://www.openradar.me/radar?id=5035192880201728
Actualización : esto parece haberse solucionado en iOS 11.1

Como referencia, esta es la edición original de Cordova que abrí que captura esto: https://issues.apache.org/jira/browse/CB-13273

Si instala versiones más recientes de ionic nivel mundial, puede ejecutar ionic cordova resources y generará todas las imágenes de pantalla de bienvenida junto con los tamaños correctos.

Solo una nota de que el uso constant palabras clave para márgenes de área segura se ha actualizado a env para 11.2 beta +

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Tenga en cuenta que este artículo: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd tiene diferentes tamaños que los anteriores y cordova página de complemento:

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x) Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x) Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x) Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x) Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x) Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x) Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x) Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

Cambié el tamaño de las imágenes como se muestra arriba y actualicé la plataforma ios y cordova-plugin-splashscreen a la última y el flash a la pantalla blanca después de que se solucionó un segundo problema. Sin embargo, la imagen inicial de spash tiene un borde blanco en la parte inferior ahora.

Para una reparación manual de un proyecto cordova existente

Las barras negras

Agregue esto a su archivo info.plist . La reparación de la imagen de lanzamiento es un problema separado, es decir, cómo agregar una imagen de lanzamiento de iPhoneX

<key>UILaunchStoryboardName</key> <string>CDVLaunchScreen</string>

Las barras blancas

Establecer viewport-fit = cover en la metaetiqueta

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

Solución para el problema de rotación de pantalla del iPhone X / XS

En iPhone X / XS, una rotación de pantalla hará que la altura de la barra de encabezado use un valor incorrecto, porque el cálculo de safe-area-inset- * no reflejaba los nuevos valores a tiempo para la actualización de la interfaz de usuario. Este error existe en UIWebView incluso en el último iOS 12. Una solución alternativa es insertar un margen superior de 1px y luego revertirlo rápidamente, lo que hará que se recalcule inmediatamente safe-area-inset- *. Una solución un tanto fea, pero funciona si tiene que quedarse con UIWebView por una razón u otra.

window.addEventListener("orientationchange", function() { var originalMarginTop = document.body.style.marginTop; document.body.style.marginTop = "1px"; setTimeout(function () { document.body.style.marginTop = originalMarginTop; }, 100); }, false);

El propósito del código es hacer que document.body.style.marginTop cambie ligeramente y luego lo revierta. No necesariamente tiene que ser "1px". Puede elegir un valor que no haga que su interfaz de usuario parpadee pero cumpla su propósito.