Tutorial zur Anpassung des iphoneX an die Client-H5-Seite

Derzeit haben viele APP-Designer begonnen, sich der H5-Frontend-Entwicklung zuzuwenden, aber die Lösung des Anpassungsproblems für alle iPhone- und Android-Modelle hat für uns oberste Priorität. Unabhängig davon, ob Sie eine APP entwerfen oder ein Front-End-H5 schreiben, müssen Sie die mobile Kompatibilität berücksichtigen.

Seit dem iPhone

1. Obere Leiste

Der vorherige Client hat immer die Methode 20pt für die Statusleiste + 44pt für die Navigationsleiste verwendet. Seit iPhone

2. Untere Bedienleiste

Seit dem iPhone Zu diesem Zeitpunkt muss unten ein leerer sicherer Bereich gelassen werden, und die endgültige Endzeile des Seiteninhalts sollte sich in der Ecke des Mobiltelefons befinden. Die Höhe dieses sicheren Bereichs beträgt 34pt.

3. Anpassungsmethode

Zusammenfassend lässt sich sagen, dass wir basierend auf den aktuellen einzigartigen Mobiltelefonparametern von iphoneX folgende Anpassungsmethode anwenden können:

(1)Meta-Tag

Zur Anpassung an das iPhone

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

(2) Medienanfragen

1. Verwenden Sie eine konstante Funktion

Die Konstantenfunktion kann nur verwendet werden, wenn viewport-fit=cover gesetzt ist

 @supports(bottom:constant(safe-area-inset-bottom)) { selector{ padding-bottom:constant(safe-area-inset-bottom); area-inset-bottom)); //Wählen Sie die Anpassungsmethode entsprechend der tatsächlichen Situation aus}}

2. Nutzen Sie die einzigartigen Modellparameter von iphoneX

 @media only screen und (device-width: 375px) und (device-height:812px) und (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }}

(3) js-Urteil (Jquery wird unten verwendet)

 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }}

(4) Client-Protokoll

Sie können den Client auch auffordern, gemäß dem Client-Protokoll abzufragen, ob es sich um ein iphoneX handelt, um die Konsistenz mit dem Client aufrechtzuerhalten.

4. Parametererklärung

Die Parameter im obigen Code werden wie folgt erklärt:

• Safe-Area-Inset-Bottom – Eine neue Funktion in ios11, mit der der Abstand zwischen dem sicheren Bereich und der Grenze festgelegt wird
• 375 – Die Breite des iphoneX-Geräts
• 812 – Die Höhe des iphoneX-Geräts
• 3 – Die Auflösung des iphoneX-Geräts
• 724 – Höhe des iPhoneX-Geräts (812) – Höhe der oberen Leiste (88)
• 34 – Höhe der unteren Sicherheitszone

Die oben genannten Parameter werden auf der Grundlage des Standards 1pt=1px berechnet. Wenn die H5-Seite die rem-Skalierungsmethode verwendet, dann ist 1pt = 1px * 3 (iphoneX-Auflösung).

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Referenzwert für jedermanns Studium oder Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht für die Kommunikation hinterlassen Netzwerk.