wake-up-neo.com

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

Ich habe meine Cordova-basierte App gestern auf dem iPhone X Simulator in Xcode 9.0 (9A235) getestet und sah nicht gut aus. Erstens, anstatt den gesamten Bildschirmbereich auszufüllen, befand sich oberhalb und unterhalb des App-Inhalts ein schwarzer Bereich . Schlimmer noch, zwischen dem App-Inhalt und dem schwarzen Bereich befanden sich zwei weiße Balken.

Durch das Hinzufügen von cordova-plugin-wkwebview-engine für die Wiedergabe von Cordova mit WKWebView (nicht UIWebView) werden die weißen Balken behoben. Durch meine Anwendung wird die Migration von UIWebView zu WKWebView nicht durchgeführt, da bei der Verwendung von cordova-plugin-wkwebview-engine beim Laden von Bildern, die von Inapp Purchase heruntergeladener gehosteter Inhalt heruntergeladen werden, Probleme auftreten in einen HTML5-Canvas (direkter file://-Zugriff durch Webview ist aufgrund von Sicherheitsbeschränkungen in WKWebView nicht möglich, daher müssen die Bilddaten über cordova-plugin-file geladen werden).

Diese Screenshots zeigen eine Test-App mit blauem Hintergrund im <body>. Oberhalb und unterhalb von UIWebView können Sie die weißen Balken sehen, jedoch nicht mit WKWebView:

Beide Cordova-Webviews zeigen die schwarzen Bereiche im Vergleich zu einer nativen App, die den gesamten Bildschirm ausfüllt:

ioscordovaphonegapiphone-x
96
DaveAlden

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

Legen Sie viewport-fit=cover im Viewport <meta>-Tag fest, d. H .:

<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 weiter unten) besteht darin, LaunchStoryboard-Images mit cordova-plugin-splashscreen zu verwenden, um die von Cordova standardmäßig verwendeten Start-Images zu ersetzen. Fügen Sie dazu der iOS-Plattform in config.xml Folgendes hinzu:

<platform name="ios">    
    <splash src="res/screen/ios/[email protected]~iphone~anyany.png" />
    <splash src="res/screen/ios/[email protected]~iphone~comany.png" />
    <splash src="res/screen/ios/[email protected]~iphone~comcom.png" />
    <splash src="res/screen/ios/[email protected]~iphone~anyany.png" />
    <splash src="res/screen/ios/[email protected]~iphone~anycom.png" />
    <splash src="res/screen/ios/[email protected]~iphone~comany.png" />
    <splash src="res/screen/ios/[email protected]~ipad~anyany.png" />
    <splash src="res/screen/ios/[email protected]~ipad~comany.png" />   

    <!-- more iOS config... -->
</platform>

Dann erstellen Sie die Bilder mit den folgenden Abmessungen in res/screen/ios (entfernen Sie vorhandene Bilder):

[email protected]~iphone~anyany.png - 1334x1334
[email protected]~iphone~comany.png - 750x1334
[email protected]~iphone~comcom.png - 1334x750
[email protected]~iphone~anyany.png - 2208x2208
[email protected]~iphone~anycom.png - 2208x1242
[email protected]~iphone~comany.png - 1242x2208
[email protected]~ipad~anyany.png - 2732x2732
[email protected]~ipad~comany.png - 1278x2732

Nachdem die schwarzen Balken entfernt wurden, unterscheidet sich das iPhone X von einer anderen Sache: Die Statusleiste ist aufgrund der "Kerbe" größer als 20 Pixel, was bedeutet, dass alle Inhalte ganz oben in Ihrer Cordova-App durch diese verdeckt werden :

Anstatt eine Auffüllung in Pixel fest zu codieren, können Sie dies in CSS automatisch mit den neuen safe-area-inset-*-Konstanten in iOS 11 behandeln.

Hinweis: in iOS 11.0 hieß die Funktion zum Umgang mit diesen Konstanten constant(), aber in iOS 11.2 hat Apple sie in env() ( siehe hier ) umbenannt. Damit beide Fälle abgedeckt werden können, müssen Sie überladen die CSS-Regel mit beiden und stützt sich auf den CSS-Fallback-Mechanismus , um den entsprechenden Code anzuwenden:

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

Das Ergebnis ist dann wie gewünscht: Der Inhalt der App 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ßzeilenschaltflächen

  • Wenn Ihre App über Fußzeilen verfügt (wie meine), müssen Sie auch safe-area-inset-bottom anwenden, um zu vermeiden, dass sich die virtuelle Home-Taste auf dem iPhone X überlappt. 
  • In meinem Fall konnte ich dies nicht auf <body> anwenden, 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 wurde auf dem iPhone X geändert, sodass ältere Versionen von cordova-plugin-statusbar auf dem iPhone X falsch angezeigt werden
  • Mike Hartington hat diese Pull-Anforderung erstellt, das die erforderlichen Änderungen vornimmt.
  • Dies wurde in die [email protected]-Version integriert. Stellen Sie daher sicher, dass Sie mindestens diese Version für die Anwendung auf Safe-Area-Insets verwenden

begrüßungsbildschirm

  • Die Einschränkungen für das LaunchScreen-Storyboard wurden unter iOS 11/iPhone X geändert. Dies bedeutet, dass der Begrüßungsbildschirm beim Starten scheinbar "sprang", wenn vorhandene Versionen des Plugins verwendet wurden ( siehe hier ).
  • Dies wurde im Fehlerbericht CB-13505 , festem PR cordova-ios # 354 erfasst und in [email protected] veröffentlicht. Stellen Sie daher sicher, dass Sie eine aktuelle Version verwenden der cordova-ios-Plattform.

geräteorientierung

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

Dies ist die ursprüngliche Cordova-Ausgabe, die ich aufgeschlagen habe. Sie enthält folgende Informationen: https://issues.Apache.org/jira/browse/CB-13273

191
DaveAlden

Für eine manuelle Korrektur an einem vorhandenen Cordova-Projekt

Die schwarzen Balken

Fügen Sie dies zu Ihrer Datei info.plist hinzu. Das Beheben des Startabbilds ist ein separates Problem, d. H. Hinzufügen eines iPhoneX-Startabbilds

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

Die weißen Balken

Setze viewport-fit = cover im Meta Tag

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

Es gibt 3 Schritte, die Sie tun müssen

für iOs 11-Statusleiste und iPhone X-Headerprobleme

1. Passform für Ansichtsfenster

Fügen Sie viewport-fit=cover zum Meta Ihres Viewports in <header> hinzu.

<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üge weitere Splash-Bilder zu deinem config.xml in <platform name="ios"> hinzu

Überspringen Sie diesen Schritt nicht. Dies ist erforderlich, um screen fit für iPhone X zu verwenden

<splash src="your_path/[email protected]~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/[email protected]~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/[email protected]~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/[email protected]~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 1242x2208 -->

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

  1. Fixiere deinen Style auf CSS

Verwenden Sie safe-area-inset-left, safe-area-inset-right, safe-area-inset-top oder safe-area-inset-bottom

Beispiel: (In Ihrem Fall verwenden!)

#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örperklasse wie is-Android oder is-ios zu deviceready hinzufügen.

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

So können Sie so etwas in CSS machen

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

In meinem Fall, in dem jeder Begrüßungsbildschirm einzeln erstellt wurde, anstatt automatisch generiert oder in einem Storyboard-Format angeordnet zu sein, musste ich bei meiner Legacy Launch-Bildschirmkonfiguration bleiben und dem Zielsystem für das iPhoneX 1125 × 2436 in der config.xml Hoch- und Querformatbilder hinzufügen 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" />

Nach dem Hinzufügen zu config.xml ("viewport-fit = cover" war bereits in index.hml festgelegt) füllt meine mit Ionic Pro erstellte App den gesamten Bildschirm auf iPhoneX-Geräten.

4
TaeKwonJoe

Nur ein Hinweis, dass das Schlüsselwort constant für Ränder im sicheren Bereich für 11.2 beta + auf env aktualisiert wurde

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

2
Brent

Wenn Sie neuere Versionen von ionic global installieren, können Sie ionic cordova resources ausführen, und es werden alle Begrüßungsbildschirmbilder mit den richtigen Größen für Sie generiert.

1
nebulr

Fix für iPhone X/XS Bildschirmdrehungsproblem

Bei iPhone X/XS führt eine Bildschirmrotation dazu, dass die Höhe der Kopfleistenleiste einen falschen Wert verwendet, da die Berechnung des Einzugsbereichs für sichere Bereiche * die neuen Werte nicht rechtzeitig für die Aktualisierung der Benutzeroberfläche widerspiegelte. Dieser Fehler ist in UIWebView selbst in der neuesten Version von iOS 12 vorhanden. Eine Problemumgehung besteht darin, einen oberen Rand von 1 Bildpunkt einzufügen und ihn schnell wieder rückgängig zu machen. Dadurch wird der Bereich für sicheres Einfügen * sofort ausgelöst. Eine etwas hässliche Lösung, aber es funktioniert, wenn Sie aus irgendeinem 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);

Der Zweck des Codes besteht darin, den document.body.style.marginTop leicht zu ändern und dann umzukehren. Es muss nicht unbedingt "1px" sein. Sie können einen Wert auswählen, der Ihre Benutzeroberfläche nicht flackert, aber ihren Zweck erfüllt.

0
YYL