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

121

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.

Al agregarlo, cordova-plugin-wkwebview-engineCordova procesa usando WKWebView (no UIWebView) corrige las barras blancas. Mi aplicación no se migra de UIWebView a WKWebView debido a problemas de rendimiento y pérdida de memoria cuando se usan cordova-plugin-wkwebview-enginecuando se cargan imágenes descargadas de Inapp Adquiera contenido alojado en un lienzo HTML5 (el file://acceso directo por Webview no es posible debido a restricciones de seguridad en WKWebView, por lo que los datos de la imagen se deben cargar a través de cordova-plugin-file).

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


(fuente: pbrd.co )


(fuente: pbrd.co )

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

ios cordova phonegap iphone-x DaveAlden
fuente
Interesante con wkwebview. En mi juego, no tenía todo el ancho, sino también un desplazamiento desde el centro. En uiwebview mantuvo el mismo tamaño, pero se centra al menos.
agmcleod
También tuve este problema, así que solucioné el problema con solo css, consulte pt.stackoverflow.com/a/263460/55076
Igor Trindade
Estoy teniendo este problema también. Solo agrego la <meta>etiqueta a mi archivo cordova index.hml, ya que otros enumerados a continuación no funcionan. Estoy ejecutando Cordova 7x con cordova-ios 4.5.4. ¿Hay algo más que deba hacer?
Rolinger

Respuestas:

245

Encontré la solución a las barras blancas aquí :

Establecer viewport-fit=coveren la <meta>etiqueta de ventana gráfica, 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-splashscreenpara reemplazar las imágenes de lanzamiento heredadas, utilizadas por Cordova de forma predeterminada. Para hacerlo, agregue lo siguiente a la plataforma iOS en config.xml:

<platform name="ios">    
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />   

    <!-- more iOS config... -->
</platform>

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 quedará oscurecida. :

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

Nota: en iOS 11.0, se llamó a la función para manejar estas constantes, constant()pero en iOS 11.2 Apple la renombró a env()( ver aquí ), por lo tanto, para cubrir ambos casos, debe sobrecargar la regla CSS con ambos y confiar en el mecanismo de respaldo CSS para aplicar el uno 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 deberá aplicar safe-area-inset-bottompara evitar que se superpongan con el botón de inicio virtual en el iPhone X.
  • En mi caso, no pude aplicar esto <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-statusbarpantalla se muestran incorrectamente en el iPhone X
  • Mike Hartington ha creado esta solicitud de extracción que aplica los cambios necesarios.
  • Esto se fusionó con el [email protected]lanzamiento, así que asegúrese de usar 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 presentación 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ó [email protected], así que asegúrese de estar utilizando una versión reciente de la cordova-iosplataforma.

orientación del dispositivo

  • Cuando se usa UIWebView en iOS 11.0, la rotación de vertical> horizontal> vertical hace que safe-area-insetno se vuelva a aplicar, lo que hace que la muesca oscurezca 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

DaveAlden
fuente
3
¿Tienes algún problema al girar la pantalla? He estado intentando, pero después de rotar la pantalla, todo está roto (safe-area-inset- * no actualiza sus valores según la orientación del dispositivo; y después de rotar vertical -> horizontal -> vertical nuevamente, los valores iniciales también se rompen ) ¿Podría ser algún problema con el navegador apple / safari?
Juan Miguel S.
1
En mi caso, cuando agregué viewport-fit=covertoda mi aplicación solo muestra una pantalla en blanco y nada más. Estoy usando iOS11, Xcode9 en iPhone 7 Plus. ¿Alguien que experimente un comportamiento similar?
Dimitri
1
@DaveAlden - se ve que en el 11,2 + beta que han caído constantpor envpalabra clave - véase también: webkit.org/blog/7929/designing-websites-for-iphone-x
Brent
1
¿Dónde pones el código CSS del cuerpo en tu aplicación? ¿Como en qué archivo? Nada funciona para mí, estoy usando Ionic 3.
Dimitri
2
¿Hay alguna actualización sobre el problema de rotación? Estoy en iOS 12 y estoy experimentando el mismo problema. Me parece extraño que este problema persista. / cc @jms
a - m
36

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 inicio es un problema separado, es decir, cómo agregar una imagen de inicio 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">
descifrador
fuente
¡Gracias! El cambio .plist tiene el mismo efecto que los cambios de la respuesta seleccionada, pero MUCHO más rápido.
2Fwebd
¿Qué hace cada una de estas tareas para la altura y el ancho de píxeles CSS? Mi aplicación tiene una serie de divisiones estrechas en la parte superior (menús, etc.) ... y luego calculo la altura de píxel restante para que el último DIV llene el resto de la pantalla. En este momento puedo ver que la barra blanca inferior cubre parte de ese DIV, pero también puedo decir que no todo, lo que implica que el DIV todavía no va a la parte inferior de la pantalla. Y a su vez, mi aplicación comienza debajo de la barra blanca superior, por lo que ni siquiera está tratando de usar el espacio superior.
Rolinger
Utilicé UILaunchStoryboardNamey logró eliminar las barras negras. Pero mi pantalla de bienvenida se expande. ¿Alguna razón por qué? La respuesta aceptada no funciona para mí
Huiting
@coder Gracias, pero agregar UILaunchStoryboardName a la lista me impide enviar a la tienda de aplicaciones: ERROR ITMS-90705: "Iniciar storyboard no encontrado. Asegúrese de especificar el nombre de archivo de storyboard de lanzamiento sin una extensión de nombre de archivo para la clave UILaunchStoryboardName en la lista de información ".
Matt Roberts
@Huiting ¿Encontraste alguna solución sobre tu caso?
LMaker
16

Hay 3 pasos que debes hacer

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

1. Cubierta de ajuste de ventana gráfica

Agregar viewport-fit=covera la meta de su ventana gráfica<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)

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

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

<splash src="your_path/Default@2x~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->

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

  1. Arregla tu estilo en CSS

Uso safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, osafe-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-androido is-iosen dispositivo listo

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
}
l2aelba
fuente
5

En mi caso en el que 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 mi configuración de pantalla de Lanzamiento de legado y agregar imágenes de retrato y paisaje para orientar las orientaciones de 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.

TaeKwonJoe
fuente
señor, pero en mi config.xml ya he agregado por encima de esta línea y viewport-fit = cover
Kapil soni
@Kapilsoni, entonces podría ser un problema con el Cordova UIWebView, WKWebView, el complemento SplashScreen o una combinación de estas configuraciones. Además, ¿está apuntando a XCode 10 u 11 en sus compilaciones?
TaeKwonJoe
señor, ¿estoy apuntando a XCode 10?
Kapil soni
2

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 invertirlo rápidamente, lo que hará que se recalcule inmediatamente el área segura-recuadro- *. 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);
Expandir fragmento

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 logre su propósito.

YYL
fuente
UIWebView fue depricated en iOS8 ... Dudo si alguno de los errores existentes será corregido. Apple está advirtiendo al cargar aplicaciones que esto se descontinuará pronto ... por lo tanto, es hora de tomar el dolor y migrar a WKWebView ...
Mozfet
2

Estoy desarrollando aplicaciones cordova durante 2 años y pasé semanas para resolver problemas relacionados (por ejemplo: desplazamientos de vista web cuando se abre el teclado). Aquí hay una solución probada para iOS y Android

PD: estoy usando iScroll para desplazar contenido

  1. Nunca use viewport-fit = cover en la metaetiqueta index.html, deje la aplicación fuera de la barra de estado. iOS manejará el área adecuada para todas las variantes de iPhone.
  2. En XCode, desmarque Ocultar barra de estado y requiere pantalla completa y no olvide seleccionar Iniciar archivo de pantalla como CDVLaunchScreen
  3. En config.xml establece la pantalla completa como falsa
  4. Finalmente, (gracias a Eddy Verbruggen por sus excelentes complementos) agregue su complemento cordova-plugin-webviewcolor para establecer la barra de estado y el color de fondo del área inferior. Este complemento le permitirá establecer el color que desee.

  5. Agregue a continuación a config.xml (primer ff después de x es opacidad)

    <preference name="BackgroundColor" value="0xff088c90" />

  6. Maneje su posición de desplazamiento usted mismo agregando eventos de enfoque a los elementos de entrada

    iscrollObj.scrollToElement(elm, transitionduration ... etc)

Para Android, haga lo mismo pero en lugar de cordova-plugin-webviewcolor , instale cordova-plugin-statusbar y cordova-plugin-navigationbar-color

Aquí hay un código javascript que usa esos complementos para funcionar tanto en iOS como en Android:

function setStatusColor(colorCode) {
    //colorCode is smtg like '#427309';
    if (cordova.platformId == 'android') {
        StatusBar.backgroundColorByHexString(colorCode);
        NavigationBar.backgroundColorByHexString(colorCode);
    } else if (cordova.platformId == 'ios') {
        window.plugins.webviewcolor.change(colorCode);
    }
}
gdarcan
fuente
1

Si instala versiones más recientes de ionictodo el mundo, puede ejecutarlo ionic cordova resourcesy generará todas las imágenes de la pantalla de presentación junto con los tamaños correctos.

nebulr
fuente
-1

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 indicó anteriormente y actualicé la iosplataforma y la cordova-plugin-splashscreenúltima y el flash a la pantalla en blanco 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.

msmfsd
fuente
1
Puedo confirmar que el iPhone X en el simulador se inicia con la Default@3x~iphone~comany.png - 1242x2436imagen
msmfsd
Cabe destacar que las dimensiones adecuadas para iPhone X son las siguientes ... Retrato: 1125 px × 2436 px ... Horizontal: 2436 px × 1125 px
Sterling Bourne