Einfache Implementierung von Html5 zur Anpassung an den iPhoneX-Notch-Bildschirm

Wenn Sie die Seite nach oben oder unten schieben, entsteht beim iPhone eine große Lücke. Es ist in Ordnung, wenn der Hintergrund ganz weiß ist, sonst sieht es aus, als wäre er kaputt, was sehr hässlich ist .

iPhone-Bildschirmgröße

Der Größenunterschied zwischen iPhoneX und anderen Modellen

Der Grund für das oben genannte Problem ist, dass das iPhoneX über einen sicheren Bereich verfügt. Der Inhalt im sicheren Bereich wird nicht durch Ecken, Sensorgehäuse und Home-Anzeige beeinflusst, der blaue Bereich in der Abbildung unten :

Mit anderen Worten: Wenn wir uns gut anpassen wollen, müssen wir sicherstellen, dass der sichtbare und bedienbare Bereich der Seite innerhalb des sicheren Bereichs liegt.

Spezifische Abmessungen finden Sie in den Human Interface Guidelines – iPhoneX

Der erste Schritt besteht darin, das Layout der Webseite im visuellen Fenster festzulegen

 <meta name=viewport content=width=device-width, viewport-fit=cover>

Eine neue Funktion von iOS11. Zur Anpassung an iPhoneX hat Apple das vorhandene Viewport-Meta-Tag erweitert, um das Layout der Webseite im visuellen Fenster festzulegen.

• enthalten: Das visuelle Fenster enthält den Inhalt der Webseite vollständig (linkes Bild)
• Cover: Der Webseiteninhalt deckt das visuelle Fenster vollständig ab (rechtes Bild)
• auto: Standardwert, konsistent mit include

Hinweis: Die Webseite, die standardmäßig keine Erweiterungen hinzufügt, ist viewport-fit=contain. Wenn sie an iPhoneX angepasst werden muss, muss viewport-fit=cover festgelegt werden.

Einzelheiten finden Sie unter: Der Viewport-Fit-Deskriptor

Im zweiten Schritt wird der Hauptinhalt der Seite auf den sicheren Bereich beschränkt.

 .post { padding: 12px; padding-left: env(safe-area-inset-left); padding-left: const(safe-area-inset-left); ); padding-right: const(safe-area-inset-right);}

Eine neue Funktion von iOS11, eine CSS-Funktion von Webkit, wird verwendet, um den Abstand zwischen dem sicheren Bereich und der Grenze festzulegen. Es gibt vier vordefinierte Variablen:

• 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

Hinweis: Einige Browser unterstützen die Konstantenfunktion nicht mehr und verwenden stattdessen die Env-Funktion.

Wenn der Client die Sicherheitszone verwaltet, hat dies standardmäßig folgende Auswirkungen:

Nach Verwendung des Vollbild-Viewport-Fit=Cover-Attributs:

Karte des Sicherheitsbereichs:

Rendering nach Eingrenzung des sicheren Bereichs:

Der Abstand ist oben auf 12 Pixel eingestellt. Wenn die Richtung gedreht wird:

Der dritte Schritt besteht darin, die Methoden min() und max() zu verwenden

 @supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); Rechts)); }} 

Problem mit Element behoben

Wenn der Seitentitel im Frontend implementiert und oben fixiert ist, wird er blockiert. Zu diesem Zeitpunkt können Sie den oberen Wert auf einen sicheren Abstandswert festlegen, zum Beispiel:

 .header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}

Referenzartikel: Entwerfen von Websites für das iPhone X

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.