Bezüglich des Problems der Anpassung des iPhoneX an die Client-H5-Seite

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum iPhoneX-Anpassungsclient H5 vor. Die Einführung im Artikel ist sehr detailliert und hat einen gewissen Referenz-Lernwert für alle, die sie unten lernen möchten.

Vorwort

Derzeit haben viele APP-Designer damit begonnen, sich der H5-Frontend-Entwicklung zuzuwenden, aber um das Problem aller iPhone- und iPhone-Modelle zu lösen Android-Modelle Das Thema Anpassung steht bei uns an erster Stelle. Unabhängig davon, ob Sie eine APP entwerfen oder ein Front-End-H5 schreiben, müssen Sie die mobile Kompatibilität berücksichtigen.

Seit der iPhone-Oberenleiste

Frühere Kunden haben 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

Wie oben erwähnt, ist die Anpassungsmethode, die wir basierend auf den aktuellen einzigartigen Mobiltelefonparametern von iphoneX verwenden können:

(1) Meta-Tag

Zur Anpassung an das iPhone >

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

(2) Medienabfrage

1. Konstante Funktion verwenden

Nur ​​wenn viewport-fit=cover eingestellt ist, konstante Funktion kann verwendet werden

@supports(bottom:constant(safe-area-inset-bottom)) {
    selector{
        padding-bottom:constant(safe-area-inset-bottom); 
        padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
    }
}

2. Verwenden Sie die eindeutigen iPhoneX-Modellparameter

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

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

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

(4) Client-Protokoll

kann auch gemäß dem Client-Protokoll angefordert werden. Der Client fragt ab, 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 Verwenden Sie unter ios11 den Abstand zwischen dem sicheren Bereich und der Grenze

• 375 – Die Breite des iphoneX-Geräts

• 812 – Die Höhe des iPhone

• 34 – Höhe des unteren Sicherheitsbereichs

• Die oben genannten Parameter werden basierend auf dem Standard 1pt=1px berechnet. Wenn die H5-Seite die rem verwendet Skalierungsmethode, dann 1pt = 1px * 3 ( iphone
• Verwandte Empfehlungen:

Verwenden Sie Android, um WeChat zu imitieren und den Fortschrittsbalken der H5-Seite zu laden

Verwenden Sie CSS zur Implementierung eine Nachahmung von iOS7-Switches

Das obige ist der detaillierte Inhalt vonBezüglich des Problems der Anpassung des iPhoneX an die Client-H5-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!