So passen Sie CSS an den Vollbildmodus des iPhone an

1. Medienabfragemethode

/*iPhone X-Anpassung*/
@media only screen und (Gerätebreite: 375px) und (Gerätehöhe: 812px) und (-webkit-device-pixel-ratio: 3) {
 .fester Boden{
 unten: 37px;
 }
}
/*iPhone XS Max-Anpassung*/
@media only screen und (Gerätebreite: 414px) und (Gerätehöhe: 896px) und (-webkit-device-pixel-ratio: 3) {
 .fester Boden{
 unten: 37px;
 }
}
/*iPhone XR Max-Anpassung*/
@media only screen und (Gerätebreite: 414px) und (Gerätehöhe: 896px) und (-webkit-device-pixel-ratio: 2) {
 .fester Boden{
 unten: 37px;
 }
}

Vorhandenes Problem: In der WeChat-Webansicht kann diese Lösung die Breite des sicheren Bereichs problemlos am unteren Rand des Elements hinzufügen. In Browsern mit unteren Leisten wie Safari (der Seitenanzeigebereich liegt bereits innerhalb des sicheren Bereichs) wird jedoch auch die Breite des sicheren Bereichs hinzugefügt.

CSS-Funktionen

Dies ist die CSS-Funktion, die Apple nach der Einführung der Vollbildversion bereitgestellt hat. Für iOS <11.2 ist es „constant()“, für iOS > 11.2 ist es „env()“. Sie können „Safe-Area-Inset-Top“, „Safe-Area-Inset-Left“, „Safe-Area-Inset-Right“ und „Safe-Area-Inset-Bottom“ entsprechend der Breite des sicheren Bereichs oben, unten, links und rechts ausfüllen. env und constant werden nur wirksam, wenn viewport-fit=cover.

Der Code lautet wie folgt:

Fügen Sie dem Meta-Tag viewport-fit=cover hinzu

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Benutzerskalierung=nein, Ansichtsfenster-Anpassung=Abdeckung">

CSS-Schreibmethode, Browser, die env und constant nicht unterstützen, ignorieren diesen Stil

.fester Boden{
 unten: 0;
 unten: konstant (Sicherheitsbereich-Einschub unten);
 unten: Umgebung (Sicherheitsbereich-Einschub unten);
}

Diese Lösung kann das Problem der Lösung 1 lösen und der Code ist prägnanter

Dies ist das Ende dieses Artikels zum Anpassen von CSS an das Vollbild-iPhone. Weitere relevante Inhalte zum Anpassen von CSS an das Vollbild-iPhone finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!