Der Schlüssel zur IphoneX-Anpassung liegt in der Anpassung der Seite an die Kerben, den unteren Bedienbereich und die großen abgerundeten Ecken.
Im Vergleich zu anderen Mobiltelefonen besteht der Unterschied zwischen IphoneX darin, dass das Gerät zwar auch über einen Bildschirm verfügt, dieser jedoch tatsächlich in mehrere Module unterteilt ist. Einzelheiten finden Sie in der folgenden Abbildung:
Wenn wir eine normale Webseite nach X verschieben, wird der Inhalt nur im sicheren Bereich angezeigt und es gibt keinen Webinhalt im nicht sicheren Bereich. Das bedeutet, dass am Kopf und am unteren Rand weiße Blöcke angezeigt werden damit umgehen?
Lösung 1. Fügen Sie dem Körper eine Hintergrundfarbe hinzuWarum Hintergrundfarbe hinzufügen? Was ist der Nutzen? Beachten Sie, dass es auf dem Kopf und am Gesäß weiße Flecken gibt, die wir gerade erwähnt haben. Tatsächlich ist es nicht korrekt zu sagen, dass es sich um Weiß handelt, da diese Farbe tatsächlich von der Hintergrundfarbe des Körpers herrührt. Wenn wir den Inhalt hoch- oder herunterziehen, werden außerdem der Inhalt und die Farbe am unteren Rand der Webseite angezeigt, was tatsächlich die Hintergrundfarbe des Körpers ist. Wenn Sie also diese beiden Effekte ändern möchten, können Sie die Hintergrundfarbe des Körpers festlegen.
2. Fügen Sie das <meta>-Tag von viewport-fit = cover hinzuDieser Schritt ist äußerst kritisch. Werfen wir zunächst einen Blick auf die Ergebnisse:
Code kopieren