Hintergrund

Von Apples iPhone Viele Apps sind direkt mit dem Stil der darin enthaltenen Webansicht kompatibel. Wenn sich der Bildschirm im Hochformat befindet, befindet sich oben oft eine Navigationsleiste, die den Inhalt in der Webansicht nicht verdeckt. Die untere Höhe wird auf App-Ebene so eingestellt, dass sich der untere Rand der Webansicht nicht innerhalb des schwarzen horizontalen Balkenbereichs befindet, sodass die Anzeige des Inhalts in der Webansicht nicht behindert wird.

Allerdings ist jede App sehr unterschiedlich und die darin enthaltene Webansicht wird unterschiedlich angezeigt. Wenn keine untere Höhe der App vorhanden ist, wird der untere Inhalt in der Webansicht durch einen kleinen schwarzen Balken blockiert. In Bezug auf die Kompatibilität mit dem Webseitenstil muss es mit dem einzigartigen „Pony“ und dem kleinen schwarzen horizontalen Balkenstil am unteren Rand des iPhoneX kompatibel sein, ohne den Stil früherer Modelle zu beeinträchtigen.

Sicherer Bereich

Verstehen Sie zunächst den sicheren Bereich von iphoneX. Der blaue Teil im Bild unten ist der sichere Bereich. Die Ränder auf beiden Seiten, die Kerbe oben und der kleine schwarze Balkenbereich unten sind allesamt unsichere Bereiche und Bereiche, in denen der Inhalt blockiert werden kann. Dann müssen wir unsere Inhalte innerhalb des sicheren Bereichs kontrollieren.

Kompatible Lösung

Glücklicherweise stellte das offizielle iOS11-System bei der Veröffentlichung von iphoneX auch die WebKit-API bereit, um mit diesem Stilunterschied kompatibel zu sein.

Schritt eins: Legen Sie das Viewport-Fit-Attribut fest

viewport-fit hat drei Attributwerte: Auto, Contain und Fit. Die Standardeinstellung ist „Automatisch“.
enthalten: Das visuelle Fenster enthält den Webseiteninhalt vollständig und der Seiteninhalt wird im sicheren Bereich
angezeigt Cover: Der Webseiteninhalt deckt das visuelle Fenster vollständig ab und der Seiteninhalt füllt den Bildschirm
auto: Standardwert, konsistent mit include
Standardmäßig zeigt Safari die Situation „viewport-fit=contain“ an, wie unten gezeigt. Im Querformat liegt der Seiteninhalt in der Webansicht im sicheren Bereich. Aus stilistischer Sicht ist dies jedoch nicht sehr schön und nutzt die Vollbildfunktion des iPhoneX nicht optimal aus.

Um dieses Problem zu lösen, enthält WebKit in ios11 eine neue CSS-Funktion env() und vier vordefinierte Umgebungsvariablen safe-area-inset-left, safe-area-inset-right, sicherer Bereich-Einsatz oben und sicherer Bereich-Einsatz unten. Diese vier Umgebungsvariablen stellen die Entfernung vom sicheren Bereich dar.

  • safe-area-inset-left: Der Abstand zwischen dem sicheren Bereich und der linken Grenze
  • safe-area-inset-right: Der Abstand zwischen dem sicheren Bereich und der rechten Grenze
  • safe-area-inset-top: Der Abstand zwischen dem sicheren Bereich und der oberen Grenze
  • safe-area-inset-bottom: Der Abstand zwischen dem sicheren Bereich und der unteren Grenze

ios11.2 verwendete früher die Funktion „constants()“, wurde jedoch später in der ios11.2-Version in die Funktion „env()“ geändert. Um mit beiden kompatibel zu sein, können Sie beide schreiben.

Schritt 2: Stellen Sie den sicheren Bereichsabstand ein

.post {
    Polsterung: 12px;
    padding-left: Konstanten(safe-area-inset-left); // ios<11.2
    padding-left: env(safe-area-inset-left); // ios>=11.2
}

Auf diese Weise ist env(safe-area-inset-left) ungleich 0, wenn es sich nicht im sicheren Bereich befindet, was dazu führt, dass auf padding-left ein Sicherheitsabstand festgelegt wird, damit der Inhalt nicht blockiert wird.

Das Obige ist der Fall, wenn es durch „Bangs“ blockiert wird. Tatsächlich blockiert in mehr Fällen der kleine schwarze Balken unten die schwebende Leiste und die Beurteilung der Attributunterstützung@supports . Das darin enthaltene CSS wird nur ausgeführt, wenn env(safe-area-inset-bottom) vom Browser unterstützt wird. 

.bottom-bar{
  Breite: 100 %;
  Position: fest;
  unten: 0;
  Hintergrund: blau;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: konstant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

Hinweis: Die Webansicht in WeChat befindet sich im Standardstatus viewport-fit=cover. Sie müssen lediglich einen Sicherheitsabstand einstellen. Die obige Lösung gilt auch für das WeChat-Applet.