J'ai trouvé la solution pour les barres blanches aquí :
Définir viewport-fit=cover sur la fenêtre de visualisation <meta> c'est-à-dire :
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
Les barres blanches dans UIWebView disparaissent alors :
![]()
La solution pour supprimer les zones noires (fournie par @dpogue dans un commentaire ci-dessous) est d'utiliser Images de LaunchStoryboard con cordova-plugin-splashscreen pour remplacer les anciennes images de lancement, utilisées par Cordova par défaut. Pour ce faire, ajoutez ce qui suit à la plateforme iOS dans le fichier 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>
Ensuite, créez les images avec les dimensions suivantes dans res/screen/ios (supprimez ceux qui existent déjà) :
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
Une fois les barres noires supprimées, il y a un autre élément différent de l'iPhone X à prendre en compte : La barre d'état est plus grande que 20px en raison de l'"encoche", ce qui signifie que tout contenu situé tout en haut de votre application Cordova sera masqué par celle-ci :
![]()
Plutôt que de coder en dur un padding en pixels, vous pouvez le gérer automatiquement en CSS en utilisant la nouvelle fonction safe-area-inset-* dans iOS 11.
Note : dans iOS 11.0 la fonction pour gérer ces constantes était appelée constant() mais dans iOS 11.2 Apple l'a renommé en env() ( voir ici ), Par conséquent, pour couvrir les deux cas, vous devez surcharger la règle CSS avec ces deux éléments et vous appuyer sur l'attribut Mécanisme de repli CSS pour appliquer celui qui convient :
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
Le résultat est alors conforme aux attentes : le contenu de l'application couvre la totalité de l'écran, mais n'est pas masqué par l'"encoche" :
![]()
J'ai créé un projet de test Cordova qui illustre les étapes ci-dessus : webview-test.zip
Notes :
Boutons de pied de page
- Si votre application comporte des boutons de pied de page (comme la mienne), vous devrez également appliquer les règles suivantes
safe-area-inset-bottom pour éviter qu'ils ne soient recouverts par le bouton Home virtuel de l'iPhone X.
-
Dans mon cas, je n'ai pas pu l'appliquer à <body> car le pied de page est absolument positionné, j'avais donc besoin de l'appliquer directement au pied de page :
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
cordova-plugin-statusbar
- La taille de la barre d'état a changé sur l'iPhone X, donc les anciennes versions de
cordova-plugin-statusbar affichage incorrect sur l'iPhone X
-
Mike Hartington a créé cette demande de retrait qui applique les changements nécessaires.
- Celle-ci a été fusionnée avec la
cordova-plugin-statusbar@2.3.0 assurez-vous donc que vous utilisez au moins cette version pour appliquer à safe-area-insets
écran d'accueil
- Les contraintes du storyboard de LaunchScreen ont changé sur iOS 11/iPhone X, ce qui signifie que l'écran d'accueil semblait "sauter" au lancement lors de l'utilisation des versions existantes du plugin ( voir ici ).
- Ceci a été capturé dans le rapport de bogue CB-13505 , PR fixe cordova-ios#354 et publié en
cordova-ios@4.5.4 Il faut donc s'assurer que vous utilisez une version récente de l'interface utilisateur de l'UE. cordova-ios plate-forme.
orientation du dispositif
- Lors de l'utilisation d'UIWebView sous iOS 11.0, la rotation de portrait > paysage > portrait provoque l'apparition de l'erreur suivante
safe-area-inset de ne pas être réappliqué, ce qui fait que le contenu est à nouveau masqué par l'encoche (comme le souligne l'élément jms dans un commentaire ci-dessous).
- Cela se produit également si l'application est lancée en mode paysage puis tournée en mode portrait.
- Cela ne se produit pas lorsque l'on utilise WKWebView par l'intermédiaire de
cordova-plugin-wkwebview-engine .
- Rapport radar : http://www.openradar.me/radar?id=5035192880201728
-
Mise à jour : il semble que cela ait été corrigé dans iOS 11.1
Pour référence, il s'agit du problème Cordova original que j'ai ouvert et qui capture ceci : https://issues.apache.org/jira/browse/CB-13273
0 votes
Intéressant avec wkwebview. Dans mon jeu, je ne l'avais pas en pleine largeur, mais aussi décalé du centre. Dans uiwebview, il garde la même taille, mais se centre au moins.
0 votes
J'ai eu ce problème aussi, alors j'ai trouvé une solution de contournement avec juste du CSS. pt.stackoverflow.com/a/263460/55076
0 votes
J'ai aussi ce problème. Il suffit d'ajouter le
<meta>à mon fichier cordova index.hml comme d'autres listés ci-dessous ne fonctionne pas. J'utilise Cordova 7x avec cordova-ios 4.5.4. Y a-t-il autre chose que je doive faire ?