web-dev-qa-db-fra.com

L'application Cordova ne s'affiche pas correctement sur iPhone X (simulateur)

J'ai testé mon application basée sur Cordova hier sur l'iPhone X Simulator sous Xcode 9.0 (9A235) et cela n'a pas l'air bien. Tout d'abord, au lieu de remplir la totalité de la zone d'écran, il y avait une zone noire au-dessus et au-dessous du contenu de l'application… .. Et pire, entre le contenu de l'application et le noir se trouvaient deux barres blanches.

L'ajout de cordova-plugin-wkwebview-engine afin que Cordova rende à l'aide de WKWebView (et non d'UIWebView) corrige les barres blanches . De plus, mon application n'est pas migrée d'UIWebView vers WKWebView en raison de problèmes de performances et de fuite de mémoire lors de l'utilisation de cordova-plugin-wkwebview-engine lors du chargement d'images téléchargées depuis Inapp dans un canevas HTML5 (l'accès direct à file:// par Webview n'est pas possible en raison de restrictions de sécurité dans WKWebView, de sorte que les données de l'image doivent être chargées via cordova-plugin-file).

Ces captures d'écran montrent une application de test avec un arrière-plan bleu défini sur le <body>. Au-dessus et au-dessous de UIWebView, vous pouvez voir les barres blanches, mais pas avec WKWebView:

Les deux Webviews Cordova présentent les zones noires par rapport à une application native qui remplit la totalité de la zone d'écran:

ioscordovaphonegapiphone-x
96
DaveAlden

J'ai trouvé la solution aux barres blanches ici :

Définissez viewport-fit=cover sur l’étiquette <meta> de la fenêtre, c.-à-d.:

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

Les barres blanches dans UIWebView disparaissent ensuite:

La solution pour supprimer les zones noires (fournie par @dpogue dans un commentaire ci-dessous) consiste à utiliser LaunchStoryboard images avec cordova-plugin-splashscreen pour remplacer les anciennes images de lancement, utilisées par défaut par Cordova. Pour ce faire, ajoutez les éléments suivants à la plate-forme iOS dans 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>

Créez ensuite les images avec les dimensions suivantes dans res/screen/ios (supprimez celles existantes):

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, l'adresse de l'iPhone X est différente: la barre d'état dépasse 20 pixels en raison de l'encoche qui signifie que tout contenu situé tout en haut de votre application Cordova sera masqué. :

Plutôt que de coder en dur un remplissage en pixels, vous pouvez le gérer automatiquement en CSS à l'aide des nouvelles constantes safe-area-inset-* dans iOS 11.

Remarque: dans iOS 11.0, la fonction permettant de gérer ces constantes s'appelait constant() mais dans iOS 11.2, Apple l'a renommée en env() ( voir ici ), Par conséquent, pour couvrir les deux cas, vous devez surcharger le CSS. règle avec les deux et s’appuie sur le 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 celui souhaité: le contenu de l'application couvre la totalité de l'écran mais n'est pas masqué par le "cran":

J'ai créé un projet test Cordova qui illustre les étapes ci-dessus: webview-test.Zip

Remarques:

Boutons de pied de page

  • Si votre application comporte des boutons de pied de page (comme le mien), vous devrez également appliquer safe-area-inset-bottom pour éviter qu'ils ne soient superposés par le bouton d'accueil virtuel sur iPhone X. 
  • Dans mon cas, je ne pouvais pas appliquer ceci à <body> car le pied de page est positionné de manière absolue. Je devais donc 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 iPhone X, les anciennes versions de cordova-plugin-statusbar ne s'affichent donc pas correctement sur iPhone X
  • Mike Hartington a créé cette demande d'extraction qui applique les modifications nécessaires.
  • Cela a été fusionné dans la version [email protected], assurez-vous donc que vous utilisez au moins cette version pour l'appliquer aux espaces sécurisés.

écran de démarrage

  • Les contraintes du storyboard LaunchScreen ont changé sur iOS 11/iPhone X, ce qui signifie que l'écran de démarrage semblait "sauter" au lancement lors de l'utilisation des versions existantes du plug-in ( voir ici ).
  • Cela a été capturé dans le rapport de bogue CB-13505 , corrigé PR cordova-ios # 354 et publié dans [email protected] , assurez-vous donc que vous utilisez une version récente de la plate-forme cordova-ios.

orientation de l'appareil

  • Lors de l'utilisation de UIWebView sur iOS 11.0, le fait de passer de portrait> landscape> portrait empêche de réappliquer le safe-area-inset, ce qui obscurcira à nouveau le contenu par l'encoche (comme souligné par jms dans un commentaire ci-dessous). 
  • Cela se produit également si l'application est lancée en mode paysage, puis tournée en portrait
  • Cela ne se produit pas lors de l'utilisation de WKWebView via cordova-plugin-wkwebview-engine.
  • Rapport radar: http://www.openradar.me/radar?id=5035192880201728
  • Update: cela semble avoir été corrigé dans iOS 11.1

Pour référence, c’est le numéro initial de Cordova que j’ai ouvert et qui capture ceci: https://issues.Apache.org/jira/browse/CB-13273

191
DaveAlden

Pour une correction manuelle d'un projet cordova existant}

Les barres noires

Ajoutez ceci à votre fichier info.plist. La correction de l’image de lancement est un problème distinct, c’est-à-dire Comment ajouter une image de lancement iPhoneX

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

Les barres blanches

Définissez viewport-fit = cover dans la balise meta

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

Il y a 3 étapes à faire

pour la barre d'état d'iOs 11 et les problèmes d'en-tête de l'iPhone X

1. Couverture de la fenêtre d'affichage

Ajoutez viewport-fit=cover à la méta de votre fenêtre d'affichage dans <header>

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

Démo:https://jsfiddle.net/gq5pt509 (index.html)

  1. Ajouter plus d'images splash à votre config.xml à l'intérieur de <platform name="ios">

Ne sautez pas cette étape, cela est nécessaire pour que l'écran s'adapte à iPhone X fonctionne

<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 -->

Démo:https://jsfiddle.net/mmy885q4 (config.xml)

  1. Fixez votre style sur CSS

Utilisez safe-area-inset-left, safe-area-inset-right, safe-area-inset-top ou safe-area-inset-bottom

Exemple: (à utiliser dans votre cas!)

#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});
}

Bonus: Vous pouvez ajouter une classe de corps telle que is-Android ou is-ios sur deviceready

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

Donc, vous pouvez faire quelque chose comme ça sur CSS

.is-ios #header {
 // Properties
}
9
l2aelba

Dans mon cas où chaque écran de démarrage était conçu individuellement au lieu d'être généré automatiquement ou présenté dans un format de story-board, je devais m'en tenir à la configuration de mon écran de lancement Legacy et ajouter des images de portrait et de paysage pour cibler les orientations iPhoneX 1125 × 2436 dans config.xml ainsi:

<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" />

Après avoir ajouté ces éléments à config.xml ("viewport-fit = cover" était déjà défini dans index.hml), mon application créée avec Ionic Pro occupe tout l’écran des appareils iPhoneX.

4
TaeKwonJoe

Notez simplement que le mot clé constant utilisé pour les marges des zones sûres a été mis à jour à env pour 11.2 bêta

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

2
Brent

Si vous installez globalement des versions plus récentes de ionic, vous pouvez exécuter ionic cordova resources et il générera toutes les images d'écran d'accueil avec les tailles correctes.

1
nebulr

Correction du problème de rotation d'écran pour iPhone X/XS

Sur l'iPhone X/XS, une rotation de l'écran entraîne l'utilisation d'une valeur incorrecte par la hauteur de la barre d'en-tête, car le calcul de l'espace sécurisé * ne reflétait pas les nouvelles valeurs dans le temps pour l'actualisation de l'interface utilisateur. Ce problème existe dans UIWebView même dans le dernier iOS 12. Une solution de contournement consiste à insérer une marge supérieure de 1px, puis à l'inverser rapidement, ce qui déclenchera le recalcul immédiat de la zone sécurisée-inset- *. Un correctif un peu moche mais cela fonctionne si vous devez rester avec UIWebView pour une raison ou une autre.

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

Le code a pour but de modifier légèrement le document.body.style.marginTop, puis de l'inverser. Cela ne doit pas nécessairement être "1px". Vous pouvez choisir une valeur qui ne provoque pas le scintillement de votre interface utilisateur, mais qui remplit son objectif.

0
YYL