Cordova App wird auf dem iPhone X (Simulator) nicht richtig angezeigt

121

Ich habe gestern meine Cordova-basierte App auf dem iPhone X Simulator in Xcode 9.0 (9A235) getestet und sie sah nicht gut aus. Erstens, anstatt den Vollbildbereich auszufüllen, gab es einen schwarzen Bereich über und unter dem App-Inhalt. Und schlimmer noch, zwischen dem App-Inhalt und dem Schwarz befanden sich zwei weiße Balken.

Durch Hinzufügen von cordova-plugin-wkwebview-engineCordova-Renderern mit WKWebView (nicht UIWebView) werden die weißen Balken korrigiert. Von meiner App wird aufgrund von Leistungs- und Speicherverlustproblemen bei der Verwendung, cordova-plugin-wkwebview-enginedie beim Laden von aus Inapp Purchase gehosteten Inhalten in einen HTML5-Canvas auftreten, keine Migration von UIWebView zu WKWebView durchgeführt (ein direkter file://Zugriff über die Webview ist aufgrund von Sicherheitsbeschränkungen in WKWebView nicht möglich Die Bilddaten müssen über geladen werden cordova-plugin-file.

Diese Screenshots zeigen eine Test-App mit einem blauen Hintergrund auf dem <body>. Über und unter UIWebView sehen Sie die weißen Balken, jedoch nicht mit WKWebView:


(Quelle: pbrd.co )


(Quelle: pbrd.co )

Beide Cordova-Webansichten weisen im Vergleich zu einer nativen App, die den gesamten Bildschirmbereich ausfüllt, die schwarzen Bereiche auf:

ios cordova phonegap iphone-x DaveAlden
quelle
Interessant mit wkwebview. In meinem Spiel hatte ich es nicht in voller Breite, sondern auch versetzt von der Mitte. In uiwebview hat es die gleiche Größe beibehalten, zentriert sich aber zumindest.
Agmcleod
Ich hatte auch dieses Problem, also habe ich eine Problemumgehung mit nur CSS gemacht, siehe pt.stackoverflow.com/a/263460/55076
Igor Trindade
Ich habe auch dieses Problem. Das Hinzufügen des <meta>Tags zu meiner Datei cordova index.hml, wie andere unten aufgeführt, funktioniert nicht. Ich verwende Cordova 7x mit Cordova-ios 4.5.4. Muss ich noch etwas tun?
Rolinger

Antworten:

245

Ich habe hier die Lösung für die weißen Balken gefunden :

Legen Sie viewport-fit=coverdas Ansichtsfenster- <meta>Tag fest, dh:

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

Die weißen Balken in UIWebView verschwinden dann:

Die Lösung zum Entfernen der schwarzen Bereiche (bereitgestellt von @dpogue in einem Kommentar unten) besteht darin, LaunchStoryboard-Images zu verwenden cordova-plugin-splashscreen, um die von Cordova standardmäßig verwendeten Legacy-Launch-Images zu ersetzen. Fügen Sie dazu der iOS-Plattform Folgendes hinzu 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>

Erstellen Sie dann die Bilder mit den folgenden Abmessungen in res/screen/ios(entfernen Sie alle vorhandenen):

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

Sobald die schwarzen Balken entfernt sind, muss das iPhone X noch etwas anderes ansprechen: Die Statusleiste ist aufgrund der "Kerbe" größer als 20 Pixel, was bedeutet, dass alle Inhalte ganz oben in Ihrer Cordova-App dadurch verdeckt werden ::

Anstatt ein Auffüllen in Pixel fest zu codieren, können Sie dies in CSS mithilfe der neuen safe-area-inset-*Konstanten in iOS 11 automatisch verarbeiten .

Hinweis: In iOS 11.0 wurde die Funktion zum Behandeln dieser Konstanten aufgerufen. constant()In iOS 11.2 wurde sie von Apple in env()( siehe hier ) umbenannt. Um beide Fälle abzudecken, müssen Sie die CSS-Regel mit beiden überladen und sich auf den CSS-Fallback-Mechanismus verlassen , um die Konstanten anzuwenden angemessen:

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

Das Ergebnis ist dann wie gewünscht: Der App-Inhalt deckt den gesamten Bildschirm ab, wird jedoch nicht durch die "Kerbe" verdeckt:

Ich habe ein Cordova-Testprojekt erstellt, das die obigen Schritte veranschaulicht: webview-test.zip

Anmerkungen:

Fußzeilentasten

  • Wenn Ihre App Fußzeilentasten hat (wie meine), müssen Sie diese auch anwenden safe-area-inset-bottom, um zu vermeiden, dass sie von der virtuellen Home-Taste auf dem iPhone X überlappt werden.
  • In meinem Fall konnte ich dies nicht anwenden, <body>da die Fußzeile absolut positioniert ist. Daher musste ich sie direkt auf die Fußzeile anwenden:

.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

Cordova-Plugin-Statusleiste

  • Die Größe der Statusleiste hat sich auf dem iPhone X geändert, sodass ältere Versionen der cordova-plugin-statusbarAnzeige auf dem iPhone X falsch sind
  • Mike Hartington hat diese Pull-Anfrage erstellt, die die erforderlichen Änderungen anwendet.
  • Dies wurde in die [email protected]Version integriert. Stellen Sie daher sicher, dass Sie mindestens diese Version verwenden, um sie auf Safe-Area-Insets anzuwenden

Begrüßungsbildschirm

  • Die Einschränkungen für das LaunchScreen-Storyboard wurden unter iOS 11 / iPhone X geändert, was bedeutet, dass der Begrüßungsbildschirm beim Start bei Verwendung vorhandener Versionen des Plugins "zu springen" schien ( siehe hier ).
  • Dies wurde im Fehlerbericht CB-13505 erfasst , PR cordova-ios # 354 behoben und in veröffentlicht. Stellen[email protected] Sie daher sicher, dass Sie eine aktuelle Version der cordova-iosPlattform verwenden.

Geräteorientierung

  • Wenn Sie UIWebView unter iOS 11.0 verwenden und rotieren von Hochformat> Querformat> Hochformat, wird das safe-area-insetnicht erneut angewendet, wodurch der Inhalt erneut durch die Kerbe verdeckt wird (wie von jms in einem Kommentar unten hervorgehoben).
  • Kommt auch vor, wenn die App im Querformat gestartet und dann im Hochformat gedreht wird
  • Dies ist bei Verwendung von WKWebView über nicht der Fall cordova-plugin-wkwebview-engine.
  • Radarbericht: http://www.openradar.me/radar?id=5035192880201728
  • Update : Dies scheint in iOS 11.1 behoben worden zu sein

Als Referenz ist dies die ursprüngliche Cordova-Ausgabe, die ich geöffnet habe und die Folgendes erfasst: https://issues.apache.org/jira/browse/CB-13273

DaveAlden
quelle
3
Haben Sie Probleme beim Drehen des Bildschirms? Ich habe es versucht, aber nach dem Drehen des Bildschirms ist alles kaputt (Safe-Area-Inset- * aktualisiert ihre Werte nicht abhängig von der Geräteorientierung; und nach dem erneuten Drehen von Hochformat -> Querformat -> Hochformat werden auch die Anfangswerte beschädigt ). Könnte es ein Problem mit dem Apple / Safari Browser geben?
Juan Miguel S.
1
In meinem Fall viewport-fit=coverzeigt meine gesamte App beim Hinzufügen nur einen leeren weißen Bildschirm und sonst nichts. Ich verwende iOS11, Xcode9 auf dem iPhone 7 Plus. Hat jemand ein ähnliches Verhalten?
Dimitri
1
@DaveAlden - es sieht aus , dass in 11,2 Beta + sie fallen gelassen haben constantfür envSchlüsselwort - siehe auch: webkit.org/blog/7929/designing-websites-for-iphone-x
Brent
1
Wo platzieren Sie den Body-CSS-Code in Ihrer App? Wie in welcher Datei? Nichts funktioniert für mich, ich benutze Ionic 3.
Dimitri
2
Gibt es ein Update bezüglich des Rotationsproblems? Ich bin auf iOS 12 und habe das gleiche Problem. Sieht für mich seltsam aus, dass dieses Problem weiterhin besteht. / cc @jms
a - m
36

Für eine manuelle Korrektur eines vorhandenen Cordova-Projekts

Die schwarzen Balken

Fügen Sie dies Ihrer info.plist- Datei hinzu. Zur Festsetzung der Startbild wird also ein anderes Thema Wie iPhoneX Einführung Bild hinzufügen

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

Die weißen Balken

Setzen Sie im Meta-Tag viewport-fit = cover

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
Codierer
quelle
Vielen Dank! Die .plist-Änderung hat den gleichen Effekt wie die Änderungen gegenüber der ausgewählten Antwort, ist jedoch viel schneller.
2. Februar
Was bewirkt jede dieser Aufgaben für die Höhe und Breite der CSS-Pixel? Meine App hat oben eine Reihe schmaler Divs (Menüs usw.) ... und dann berechne ich die verbleibende Pixelhöhe, damit der letzte DIV den Rest des Bildschirms ausfüllt. Im Moment kann ich sehen, dass der untere weiße Balken einen Teil dieses DIV abdeckt, aber ich kann auch nicht alles sagen - was bedeutet, dass der DIV immer noch nicht am unteren Bildschirmrand angezeigt wird. Und im Gegenzug startet meine App unterhalb des oberen weißen Balkens, sodass nicht einmal versucht wird, den oberen Bereich zu nutzen.
Rolinger
Ich benutzte UILaunchStoryboardNameund es gelang mir , die schwarzen Balken zu entfernen. Aber mein Begrüßungsbildschirm wird erweitert. Irgendein Grund warum? Die akzeptierte Antwort funktioniert nicht für mich
Huiting
@coder Danke - aber das Hinzufügen des UILaunchStoryboardName zur Liste verhindert, dass ich ihn an den App Store senden kann: FEHLER ITMS-90705: "Starten des Storyboards nicht gefunden. Stellen Sie sicher, dass Sie den Start-Storyboard-Dateinamen ohne Dateinamenerweiterung für den Schlüssel UILaunchStoryboardName angeben in der Info.plist. "
Matt Roberts
@ Huiting haben Sie eine Lösung für Ihren Fall gefunden?
LMaker
16

Es gibt 3 Schritte, die Sie tun müssen

für iOs 11 Statusleiste & iPhone X Header Probleme

1. Abdeckung für das Ansichtsfenster

Fügen viewport-fit=coverSie das Meta in Ihrem Ansichtsfenster hinzu<header>

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

Demo: https://jsfiddle.net/gq5pt509 (index.html)

  1. Fügen Sie Ihrem config.xmlInneren weitere Begrüßungsbilder hinzu<platform name="ios">

Überspringen Sie diesen Schritt nicht . Dies ist erforderlich, um den Bildschirm für die Arbeit mit dem iPhone X fit zu machen

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

Demo: https://jsfiddle.net/mmy885q4 (config.xml)

  1. Korrigieren Sie Ihren Stil in CSS

Verwenden Sie safe-area-inset-left, safe-area-inset-right, safe-area-inset-topodersafe-area-inset-bottom

Beispiel: (Verwenden Sie in Ihrem Fall!)

#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: Sie können Körperklassen wie is-androidoder is-iosauf Deviceready hinzufügen

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

Sie können also so etwas in CSS tun

.is-ios #header {
 // Properties
}
l2aelba
quelle
5

In meinem Fall, in dem jeder Begrüßungsbildschirm einzeln entworfen wurde, anstatt automatisch generiert oder in einem Storyboard-Format angeordnet zu werden, musste ich mich an meine Legacy-Startbildschirmkonfiguration halten und Hoch- und Querformatbilder hinzufügen, um die Ausrichtung von iPhoneX 1125 × 2436 auf die config.xml auszurichten wie so:

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

Nachdem ich diese zu config.xml hinzugefügt habe ("viewport-fit = cover" wurde bereits in index.hml festgelegt), füllt meine mit Ionic Pro erstellte App den gesamten Bildschirm auf iPhoneX-Geräten aus.

TaeKwonJoe
quelle
Sir, aber in meiner config.xml habe ich bereits über dieser Zeile und viewport-fit = cover hinzugefügt
Kapil soni
@Kapilsoni dann kann es ein Problem mit dem Cordova UIWebView, WKWebView, SplashScreen-Plugin oder einer Kombination dieser Konfigurationen sein. Zielen Sie in Ihren Builds auch auf XCode 10 oder 11 ab?
TaeKwonJoe
Sir, ich ziele auf XCode 10?
Kapil Soni
2

Behebung des Problems mit der Bildschirmrotation des iPhone X / XS

Auf dem iPhone X / XS führt eine Bildschirmdrehung dazu, dass die Höhe der Kopfzeile einen falschen Wert verwendet, da die Berechnung des Safe-Area-Inset- * die neuen Werte nicht rechtzeitig für die Aktualisierung der Benutzeroberfläche widerspiegelte. Dieser Fehler ist in UIWebView auch unter dem neuesten iOS 12 vorhanden. Eine Problemumgehung besteht darin, einen oberen Rand von 1 Pixel einzufügen und ihn dann schnell umzukehren, wodurch eine sofortige Neuberechnung des Safe-Area-Inset- * ausgelöst wird. Eine etwas hässliche Lösung, die jedoch funktioniert, wenn Sie aus dem einen oder anderen Grund bei UIWebView bleiben müssen.

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

Der Zweck des Codes besteht darin, das Dokument.body.style.marginTop geringfügig zu ändern und es dann umzukehren. Es muss nicht unbedingt "1px" sein. Sie können einen Wert auswählen, der nicht zum Flackern Ihrer Benutzeroberfläche führt, aber seinen Zweck erfüllt.

YYL
quelle
UIWebView wurde in iOS8 beraubt ... Ich bezweifle, dass einer der vorhandenen Fehler behoben wird. Apple warnt beim Hochladen von Apps, dass dies bald eingestellt wird ... also Zeit, sich die Mühe zu machen und auf WKWebView zu migrieren ...
Mozfet
2

Ich entwickle Cordova-Apps seit 2 Jahren und habe Wochen damit verbracht, verwandte Probleme zu lösen (z. B. Webview-Bildlauf beim Öffnen der Tastatur). Hier ist eine getestete und bewährte Lösung für iOS und Android

PS: Ich verwende iScroll zum Scrollen von Inhalten

  1. Verwenden Sie niemals viewport-fit = cover am Meta-Tag von index.html. Lassen Sie die App außerhalb der Statusleiste. iOS verwaltet den richtigen Bereich für alle iPhone-Varianten.
  2. Deaktivieren Sie in XCode das Kontrollkästchen Statusleiste ausblenden und benötigen Sie Vollbild. Vergessen Sie nicht, Bildschirmdatei als CDVLaunchScreen starten auszuwählen
  3. Setzen Sie in config.xml den Vollbildmodus auf false
  4. Zum Schluss (danke an Eddy Verbruggen für die großartigen Plugins) fügen Sie sein Plugin Cordova-Plugin-Webviewcolor hinzu , um die Statusleiste und die Hintergrundfarbe des unteren Bereichs festzulegen. Mit diesem Plugin können Sie jede gewünschte Farbe einstellen.

  5. Fügen Sie unten zu config.xml hinzu (erstes ff nach x ist Deckkraft)

    <preference name="BackgroundColor" value="0xff088c90" />

  6. Behandeln Sie Ihre Bildlaufposition selbst, indem Sie Eingabeelementen Fokusereignisse hinzufügen

    iscrollObj.scrollToElement(elm, transitionduration ... etc)

Machen Sie für Android dasselbe, aber installieren Sie anstelle von Cordova-Plugin-Webviewcolor Cordova-Plugin-Statusleiste und Cordova-Plugin-Navigationsleistenfarbe

Hier ist ein Javascript-Code, der diese Plugins verwendet, um sowohl auf iOS als auch auf Android zu funktionieren:

function setStatusColor(colorCode) {
    //colorCode is smtg like '#427309';
    if (cordova.platformId == 'android') {
        StatusBar.backgroundColorByHexString(colorCode);
        NavigationBar.backgroundColorByHexString(colorCode);
    } else if (cordova.platformId == 'ios') {
        window.plugins.webviewcolor.change(colorCode);
    }
}
gdarcan
quelle
1

Wenn Sie neuere Versionen von ionicglobal installieren , können Sie diese ausführen ionic cordova resourcesund alle Begrüßungsbildschirme mit den richtigen Größen für Sie generieren.

Nebel
quelle
-1

Bitte beachten Sie, dass dieser Artikel: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd andere Größen als oben und Cordova hat Plugin-Seite:

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

Ich habe die Größe der Bilder wie oben geändert und die iosPlattform cordova-plugin-splashscreenauf den neuesten Stand gebracht und den Blitz auf den weißen Bildschirm gebracht, nachdem ein zweites Problem behoben wurde. Das anfängliche Spash-Bild hat jetzt jedoch unten einen weißen Rand.

msmfsd
quelle
1
Ich kann bestätigen, dass das iPhone X beim Start des Simulators mit Default@3x~iphone~comany.png - 1242x2436image
msmfsd
Zu beachten ist, dass die richtigen Dimensionen für das iPhone X wie folgt sind: Hochformat: 1125px × 2436px ... Landschaft: 2436px × 1125px
Sterling Bourne