J'ai testé mon application basée sur Cordova hier sur le simulateur iPhone X dans Xcode 9.0 (9A235) et cela n'avait pas l'air bien. Tout d'abord, au lieu de remplir la zone plein écran, il y avait une zone noire au-dessus et en dessous du contenu de l'application. Et pire, entre le contenu de l'application et le noir, il y avait deux barres blanches.
L'ajout de cordova-plugin-wkwebview-engine
sorte que Cordova rende à l'aide de WKWebView (et non de UIWebView) corrige les barres blanches. Par mon application n'est pas migré d'UIWebView vers WKWebView en raison de problèmes de performances et de fuites de mémoire lors de l'utilisation cordova-plugin-wkwebview-engine
qui se produisent lors du chargement d'images téléchargées à partir d'Inapp Achetez du contenu hébergé dans un canevas HTML5 (l' file://
accès direct par Webview n'est pas possible en raison des restrictions de sécurité dans WKWebView donc les données d'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 en dessous de UIWebView, vous pouvez voir les barres blanches, mais pas avec WKWebView:
(source: pbrd.co )
(source: pbrd.co )
Les deux Webviews Cordova présentent les zones noires par rapport à une application native qui remplit la zone plein écran:
<meta>
simple fait d' ajouter la balise à mon fichier cordova index.hml comme d'autres énumérés ci-dessous ne fonctionne pas. J'utilise Cordova 7x avec cordova-ios 4.5.4 - y a-t-il autre chose que je dois faire?Réponses:
J'ai trouvé la solution aux barres blanches ici :
Défini
viewport-fit=cover
sur la<meta>
balise de la fenêtre , c'est-à-dire:Les barres blanches dans UIWebView disparaissent alors:
La solution pour supprimer les zones noires (fournies par @dpogue dans un commentaire ci-dessous) consiste à utiliser les images LaunchStoryboard avec
cordova-plugin-splashscreen
pour remplacer les anciennes images de lancement, utilisées par défaut par Cordova. Pour ce faire, ajoutez ce qui suit à la plate-forme iOS dansconfig.xml
:Créez ensuite les images avec les dimensions suivantes dans
res/screen/ios
(supprimez toutes les images existantes):Une fois les barres noires supprimées, il y a une autre chose différente à propos de l'iPhone X: la barre d'état est plus grande que 20 pixels en raison de l '«encoche», ce qui signifie que tout contenu tout en haut de votre application Cordova sera masqué par elle. :
Plutôt que de coder en dur un remplissage en pixels, vous pouvez gérer cela automatiquement dans CSS en utilisant les nouvelles
safe-area-inset-*
constantes d'iOS 11.Remarque: dans iOS 11.0, la fonction permettant de gérer ces constantes a été appelée,
constant()
mais dans iOS 11.2, Apple l'a renomméeenv()
( voir ici ), par conséquent, pour couvrir les deux cas, vous devez surcharger la règle CSS avec les deux et compter sur le mécanisme de secours CSS pour appliquer le approprié:Le résultat est alors celui souhaité: le contenu de l'application couvre le plein écran, mais n'est pas masqué par le "cran":
J'ai créé un projet de test Cordova qui illustre les étapes ci-dessus: webview-test.zip
Remarques:
Boutons de pied de page
safe-area-inset-bottom
pour éviter qu'ils ne soient superposés par le bouton d'accueil virtuel de l'iPhone X.<body>
car le pied de page est absolument positionné, je devais donc l'appliquer directement au pied de page:cordova-plugin-statusbar
cordova-plugin-statusbar
affichage ne s'affichent donc pas correctement sur l'iPhone X[email protected]
version, alors assurez-vous que vous utilisez au moins cette version pour appliquer aux insertions de zone de sécuritéécran de démarrage
[email protected]
, alors assurez-vous d'utiliser une version récente de lacordova-ios
plate - forme.orientation de l'appareil
safe-area-inset
réapplication du contenu, ce qui rend le contenu à nouveau masqué par l'encoche (comme souligné par jms dans un commentaire ci-dessous).cordova-plugin-wkwebview-engine
.Pour référence, il s'agit du numéro original de Cordova que j'ai ouvert et qui capture ceci: https://issues.apache.org/jira/browse/CB-13273
la source
viewport-fit=cover
toute mon application n'affiche qu'un écran blanc vide et rien d'autre. J'utilise iOS11, Xcode9 sur iPhone 7 Plus. Quelqu'un a-t-il un comportement similaire?constant
pourenv
mot - clé - voir aussi: webkit.org/blog/7929/designing-websites-for-iphone-xPour une correction manuelle à 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
Les barres blanches
Définissez viewport-fit = cover dans la balise Meta
la source
UILaunchStoryboardName
et il a réussi à supprimer les barres noires. Mais mon écran de démarrage s'agrandit. Une raison pourquoi? La réponse acceptée ne fonctionne pas pour moiIl y a 3 étapes à suivre
pour les problèmes de barre d'état iOs 11 et d'en-tête iPhone X
1. Couvercle d'ajustement de la fenêtre
Ajouter
viewport-fit=cover
à la méta de votre fenêtre d'affichage<header>
Démo: https://jsfiddle.net/gq5pt509 (index.html)
config.xml
intérieur<platform name="ios">
Ne sautez pas cette étape , cela est nécessaire pour que l' écran s'adapte au travail sur iPhone X
Démo: https://jsfiddle.net/mmy885q4 (config.xml)
Utilisez
safe-area-inset-left
,safe-area-inset-right
,safe-area-inset-top
ousafe-area-inset-bottom
Exemple: (à utiliser dans votre cas!)
Bonus: vous pouvez ajouter une classe de corps comme
is-android
ouis-ios
sur devicereadyVous pouvez donc faire quelque chose comme ça sur CSS
la source
Dans mon cas où chaque écran de démarrage a été conçu individuellement au lieu d'être généré automatiquement ou disposé dans un format de storyboard, j'ai dû m'en tenir à ma configuration d'écran de lancement hérité et ajouter des images portrait et paysage pour cibler les orientations iPhoneX 1125 × 2436 au config.xml ainsi:
Après avoir ajouté ceux-ci à config.xml ("viewport-fit = cover" était déjà défini dans index.hml), mon application créée avec Ionic Pro remplit tout l'écran sur les appareils iPhoneX.
la source
Veuillez noter que le
constant
mot clé utilisé pour les marges de la zone de sécurité a été mis à jourenv
pour la version 11.2 beta +https://webkit.org/blog/7929/designing-websites-for-iphone-x/
la source
Correction du problème de rotation de l'écran de l'iPhone X / XS
Sur l'iPhone X / XS, une rotation de l'écran entraînera l'utilisation d'une valeur incorrecte par la hauteur de la barre d'en-tête, car le calcul de safe-area-inset- * ne reflétait pas les nouvelles valeurs à temps pour l'actualisation de l'interface utilisateur. Ce bogue 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 safe-area-inset- *. Une solution quelque peu moche mais qui fonctionne si vous devez rester avec UIWebView pour une raison ou une autre.
Le but du code est de modifier légèrement le document.body.style.marginTop, puis de l'inverser. Il ne doit pas nécessairement être "1px". Vous pouvez choisir une valeur qui ne fait pas clignoter votre interface utilisateur, mais qui atteint son objectif.
la source
Je développe des applications cordova depuis 2 ans et j'ai passé des semaines à résoudre des problèmes connexes (par exemple: la vue Web défile lorsque le clavier est ouvert). Voici une solution testée et éprouvée pour iOS et Android
PS: j'utilise iScroll pour faire défiler le contenu
Ajoutez ci-dessous à config.xml (le premier ff après x est l'opacité)
Gérez vous-même votre position de défilement en ajoutant des événements de focus aux éléments d'entrée
Pour Android, faites de même mais au lieu de cordova-plugin-webviewcolor , installez cordova-plugin-statusbar et cordova -plugin-navigationbar-color
Voici un code javascript utilisant ces plugins pour fonctionner à la fois sur iOS et Android:
la source
Si vous installez des versions plus récentes de
ionic
globalement, vous pouvez exécuterionic cordova resources
et il générera toutes les images d'écran de démarrage pour vous avec les tailles correctes.la source
Veuillez noter que cet article: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd a des tailles différentes de celles ci-dessus et cordova page du plugin:
J'ai redimensionné les images comme ci-dessus et mis à jour la
ios
plate-forme et lacordova-plugin-splashscreen
dernière et le flash en écran blanc après la résolution d'un deuxième problème. Cependant, l'image de projection initiale a maintenant une bordure blanche en bas.la source
Default@3x~iphone~comany.png - 1242x2436
image