So passen Sie CSS an den Vollbildmodus des iPhone an

1. Medienabfragemethode

/*iPhone X 适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XS max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XR max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
 .fixed-bottom{
 bottom: 37px;
 }
}

Bestehende Probleme: In der WeChat-Webansicht kann diese Lösung problemlos die Breite des sicheren Bereichs am unteren Rand des Elements hinzufügen. Browser mit unteren Leisten wie Safari (der Seitenanzeigebereich befindet sich bereits innerhalb des sicheren Bereichs) fügen jedoch auch die Breite des sicheren Bereichs hinzu.

(Video-Tutorial: CSS-Video-Tutorial)

2. CSS-Funktionen

CSS-Funktionen, die von Apple nach dem Start im Vollbildmodus bereitgestellt werden, ios<11.2 konstant(), ios>11.2 ist env(). Sie können „Safe-Area-Inset-Top“, „Safe-Area-Inset-Left“, „Safe-Area-Inset-Right“ und „Safe-Area-Inset-Bottom“ entsprechend den Sicherheitsbereichsbreiten nach oben, unten, links und rechts ausfüllen . env und konstant werden nur wirksam, wenn viewport-fit=cover.

Der Code lautet wie folgt:

Meta-Tag hinzugefügt viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

CSS-Schreibmethode, Browser, die Env und Constant nicht unterstützen, ignorieren diesen Stil

.fixed-bottom{
 bottom: 0;
 bottom: constant(safe-area-inset-bottom);
 bottom: env(safe-area-inset-bottom);
}

Empfohlenes Tutorial: Grundlegendes Tutorial für den Einstieg in CSS

Das obige ist der detaillierte Inhalt vonSo passen Sie CSS an den Vollbildmodus des iPhone an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!