Hintergrund

Von Apples iPhone aus sind viele Apps 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 es keine untere Höhe der App gibt, 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.

sicheren Bereich

Werfen wir zunächst einen Blick auf den sicheren Bereich des iPhones

Kompatible Lösungen

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 1: Legen Sie das Viewport-Fit-Attribut fest

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
„viewport-fit“ verfügt über 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 aus.
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() sowie vier vordefinierte Umgebungsvariablensafe-area-inset-left,safe-area-inset-right,safe-area-inset-topUndsafe-area-inset-bottom. 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: Abstand vom sicheren Bereich zur rechten Grenze
  • Safe-Area-Inset-Top: Abstand vom sicheren Bereich zur oberen Grenze
  • Safe-Area-Inset-Bottom: Abstand vom sicheren Bereich zur unteren Grenze

Vor ios11.2 wurde die Funktion „constants()“ verwendet, später wurde sie jedoch in ios11.2 in die Funktion „env()“ geändert. Um mit beiden kompatibel zu sein, können Sie beide schreiben.

Schritt 2: Stellen Sie den Sicherheitszonenabstand ein

.post {
    padding: 12px;
    padding-left: constants(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 den schwebenden Balken, und die Attribute unterstützen das Urteil.@supports,nurenv(safe-area-inset-bottom)Das darin enthaltene CSS wird nur ausgeführt, wenn es vom Browser unterstützt wird.

 

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant( safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

Hinweis: Die Webansicht in WeChat ist standardmäßig viewport-fit=cover. Sie müssen lediglich einen Sicherheitsabstand einstellen. Die obige Lösung gilt auch für das WeChat-Applet.