Les zones sécurisées de l'iPhone X Ionic 3 ne fonctionnent pas

Question

J'utilise xCode 9.2, Ionic 3 avec toutes les dernières versions (j'ai mis à jour tout ce à quoi je pouvais penser) et j'ai ajouté ce qui suit :

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Lors des tests sur les appareils et dans le simulateur, avec l'iPhone 7 tout fonctionne bien, mais avec l'iPhone X j'ai le problème suivant :

Les sections supérieure et inférieure de l'application sont beaucoup trop hautes et basses respectivement. Je pense que cela a quelque chose à voir avec les nouvelles zones de sécurité de l'iPhone X.

J'ai essayé d'ajouter ce qui suit, mais cela n'a pas fonctionné car cela m'a donné un espace blanc en haut sur tous les appareils.

<preference name="StatusBarOverlaysWebView" value="false" />

Quelqu'un a-t-il rencontré un problème similaire ?

Mes infos Ionic :

paquets cli :

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

paquets globaux :

cordova (Cordova CLI) : 7.1.0 

les paquets locaux :

@ionic/app-scripts : 3.1.6
Cordova Platforms  : ios 4.5.2
Ionic Framework    : ionic-angular 3.7.1

Système :

ios-deploy : 1.9.2 
ios-sim    : 5.0.12 
Node       : v7.10.0
npm        : 4.2.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b 

Variables d'environnement :

ANDROID_HOME : not set

Divers :

backend : legacy

Answer 1

J'ai Ionic Angular à 3.7.1 (vieux de quelques mois mais encore trop vieux). Si vous mettez à jour vers 3.9.2 ou plus récent ( https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#390-2017-11-08 ) alors cela fonctionne comme un charme !

Answer 2

Essayez ça :

<meta name="viewport" viewport-fit=cover content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">