Achtergrond

Van Apple's iPhone Veel apps zijn direct compatibel met de stijl van de webweergave erin. Wanneer het scherm in portretmodus staat, is de bovenkant vaak een navigatiebalk, die niet de inhoud in de webweergave bedekt. De onderste hoogte wordt vanaf app-niveau zo ingesteld dat de onderkant van de webweergave zich niet binnen het zwarte horizontale balkgebied bevindt, zodat deze de weergave van de inhoud in de webweergave niet belemmert.

Elke app is echter heel anders en de webweergave binnenin wordt anders weergegeven. Als er geen onderste hoogte van de app is, wordt de onderste inhoud in de webweergave geblokkeerd door een kleine zwarte balk. Wat de compatibiliteit van webpaginastijlen betreft, moet deze compatibel zijn met de unieke "pony" en de kleine zwarte horizontale balkstijl onderaan de iPhoneX, zonder de stijl van eerdere modellen te beïnvloeden.

Veilige omgeving

Begrijp eerst het veilige gebied van iphoneX. Het blauwe gedeelte op onderstaande afbeelding is het veilige gebied. De marges aan beide zijden, de inkeping bovenaan en het kleine zwarte balkgedeelte onderaan zijn allemaal onveilige gebieden en zijn gebieden waar de inhoud mogelijk wordt geblokkeerd. Vervolgens moeten we onze inhoud binnen het veilige gebied controleren.

Compatibele oplossing

Toen iphoneX uitkwam, bood het officiële ios11-systeem gelukkig ook WebKit Api om compatibel te zijn met dit stijlverschil.

Stap één: Stel het viewport-fit attribuut in

viewport-fit heeft drie attribuutwaarden: auto, contain en fit. De standaardinstelling is automatisch.
bevatten: het visuele venster bevat de inhoud van de webpagina volledig en de pagina-inhoud wordt weergegeven in het veilige gebied
omslag: de inhoud van de webpagina bedekt het visuele venster volledig en de pagina-inhoud vult het scherm
auto: standaardwaarde, consistent met contain
Standaard geeft Safari de situatie viewport-fit=contain weer, zoals hieronder weergegeven. In de liggende modus bevindt de pagina-inhoud in de webweergave zich binnen het veilige gebied. Vanuit stijlperspectief is dit echter niet erg mooi en wordt er geen goed gebruik gemaakt van de volledig schermfunctie van iPhoneX.

Om dit probleem op te lossen, bevat WebKit in ios11 een nieuwe CSS-functie env() en vier vooraf gedefinieerde omgevingsvariabelen safe-area-inset-left, safe-area-inset-right, veilige-inzet-boven en veilige-inzet-onder. Deze vier omgevingsvariabelen vertegenwoordigen de afstand tot het veilige gebied.

  • safe-area-inset-left: De afstand tussen het veilige gebied en de linkergrens
  • safe-area-inset-right: de afstand tussen het veilige gebied en de rechter grens
  • safe-area-inset-top: De afstand tussen het veilige gebied en de bovengrens
  • safe-area-inset-bottom: De afstand tussen het veilige gebied en de ondergrens

ios11.2 gebruikte vroeger de functie constants(), maar werd later in de ios11.2-versie gewijzigd in de functie env(). Om compatibel te zijn met beide, kunt u beide schrijven.

Stap 2: Stel de afstand tot het veilige gebied in

.post {
    opvulling: 12px;
    opvulling-links: constanten(veilige-gebied-inzet-links); //ios<11.2
    opvulling-links: env(veilige-gebied-inzet-links); //ios>=11.2
}

Als deze zich niet in het veilige gebied bevindt, is env(safe-area-inset-left) op deze manier niet gelijk aan 0, waardoor er een veilige afstand wordt ingesteld op opvulling-links, zodat de inhoud niet wordt geblokkeerd.

Het bovenstaande is het geval wanneer het wordt geblokkeerd door een "pony". Sterker nog, in meer gevallen blokkeert de kleine zwarte balk onderaan de zwevende balk, plus attribuutondersteuningsoordeel@supports , de css erin wordt alleen uitgevoerd als env(safe-area-inset-bottom) wordt ondersteund door de browser. 

.onderste balk{
  breedte: 100%;
  positie: vast;
  bodem: 0;
  achtergrond: blauw;
}
@supports (opvulling-bodem: env(veilige-gebied-inzet-bodem)) {
    .onderbalk {
      opvulling-bodem: constant(veilige-gebied-inzet-bodem);
      opvulling-bodem: env(veilige-gebied-inzet-bodem);
    }
  }

Opmerking: de webweergave in WeChat heeft standaard de status viewport-fit=cover. U hoeft alleen maar een veilige afstand in te stellen. De bovenstaande oplossing is ook van toepassing op de WeChat-applet.