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
cordova-plugin-statusbar@2.3.0lanzamiento, 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ó
cordova-ios@4.5.4, 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
