Werfen wir zunächst einen Blick darauf, wie das iPhone-X-Modell aussieht
Im Bild oben hat das Iphonex-Modell diese beiden neuen Bereiche am Kopf und an der Unterseite, daher müssen wir für diesen Modelltyp einige Anpassungen vornehmen, um die Anzeige unserer Webapp zu erleichtern.
Für mobile Seiten aus h5 ist das übliche Layout Kopf + Rumpf + unterer Dreispaltenmodus. Der Kopf und die Oberseite sind fest positioniert, und der Inhalt im Rumpf kann wie folgt gescrollt werden:
<div class=page> <header></header> <main></main> <footer></footer> </div>
Wenn Sie jedoch nicht die neuen CSS-Attribute des iPhone verwenden, wird in dieser Situation die Navigationsleiste unten durch das Atemlicht blockiert, das mit dem iPhone geliefert wird. Habe mir mehrere Lösungen angesehen
Ich verwende das Vue-Framework, das wir auf der Seite index.html hinzufügen müssen
<meta name=viewport content=width=device-width,viewport-fit=cover>
Dann wird auf der öffentlichen app.vue-Seite die Anzeige jeder unserer Komponenten hier durch die Router-Ansicht ersetzt, sodass die öffentliche Kopfleiste hier verarbeitet werden kann. Das spezifische Layout ist wie folgt:
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></template>Im obigen Layout schreiben wir Folgendes für das div mit der Klasse placeholder_top:
.placeholder_top { Position: behoben; oben: 0; Breite: 10rem; Höhe: konstant (sicherer Bereich-Einsatz: oben); ); Z-Index: 999;}In diesem Fall müssen wir uns in Zukunft nicht mehr mit dem Problem der oberen Leiste für separate Komponenten befassen. Als nächstes können wir uns mit dem zuvor erwähnten Header-Problem befassen. Im Allgemeinen werden die meisten Header in öffentliche Komponenten gekapselt Aufgrund des Einflusses des Elements, das wir auf der app.vue-Seite eingefügt haben, muss auch die CSS-Schreibmethode unseres Kopfes leicht geändert werden. Das Seitenlayout der Kopfkomponente ist wie folgt:
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}>Navigationsinhalt</div> <div class=placeholder></div> </header></ Vorlage>Das CSS der Seite lautet:
header{Hintergrundfarbe: #303030; .title{ Position: Fixed; Top: Constant(Safe-Area-Inset-Top); Höhe: 88px; Z-Index: 999; } .placeholder{ height: 88px }}So geschrieben befindet sich die Kopfnavigationsleiste unter der Statusleiste des Mobiltelefons, wirkt sich nicht auf das Fenster aus und ist mit Android- und iOS-Modellen kompatibel (solche Kompatibilitätsprobleme betreffen auch Systemprobleme mit iOS, dieser Artikel ist jedoch noch nicht verfügbar). beteiligt)
Schauen wir uns nun die Verarbeitung des Hauptbereichs an. Da die obige Header-Komponente verarbeitet wurde, sieht das Hauptlayout wie folgt aus:
main {padding-top: konstant(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: calc(88px + konstant(safe-area-inset-bottom) );padding-bottom: calc(88px + env(safe-area-inset-bottom));ps: Lassen Sie es mich hier erklären. Die folgenden zwei Zeilen werden verwendet, wenn die aktuelle Seite keine untere Navigationsleiste hat.
padding-bottom: konstant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);},
Das Hauptlayout ist fertig. Schreiben Sie einfach den Inhalt direkt.
Schauen Sie sich dann das Fußzeilenlayout unten an
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> Unterer Inhalt</div></footer></template>Das CSS des unteren Inhalts lautet wie folgt:
Fußzeile: fest; unten: 0; Breite: 10rem; Höhe: calc(88px + env(safe-area-inset-)); unten)); Hintergrundfarbe: #303030; .foot{ Position: absolut; Breite: 10rem; 88px; }}Auf diese Weise wird der Inhalt im unteren Navigationsfuß nicht durch das mit dem Telefon gelieferte Atemlicht blockiert.
Wir können also zusammenfassen, dass die CSS-Schreibmethode, die wir möglicherweise für diese Art der Webanwendungsanpassung verwenden müssen, wie folgt lautet:
Position: fest; oben: konstant (sicherer Bereich-Einsatz oben); unten: konstant (sicherer Bereich-Einsatz unten); -inset-bottom); top: calc(1rem + konstant(safe-area-inset-top)); top: calc(1rem + env(safe-area-inset-top)); calc(1rem + konstant(safe-area-inset-bottom)); unten: calc(1rem + env(safe-area-inset-bottom));
ps: Im obigen Text steht: style={position:fixposition?'absolute':'fixed'} Dies soll das Problem der ungenauen Positionierung solcher fester Elemente lösen, wenn der Benutzer auf das Eingabefeld klickt Wenn Sie interessiert sind, können Sie es vorerst nicht besprechen.
Hier können je nach tatsächlichem Bedarf unterschiedliche Schreibmethoden verwendet werden. Es wird empfohlen, nicht zu stark von der allgemeinen Layoutlogik abzuweichen. Außerdem wird diese Methode verwendet, um eine einheitliche Verarbeitung und eine bequeme Wartung zu gewährleisten Aufgrund der Layoutkompatibilität kann ein echtes Maschinen-Debugging verwendet werden. Die Methode besteht darin, den PC-Browser zum Debuggen der Webanwendung zu verwenden und die meisten Stilprobleme zu lösen. Ich werde das nächste Mal über das echte Maschinen-Debugging schreiben.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.