Arrière-plan

Depuis l'iPhone d'Apple De nombreuses applications sont directement compatibles avec le style de la vue Web à l'intérieur. Lorsque l'écran est en mode portrait, le haut est souvent une barre de navigation, qui ne couvre pas le contenu de la vue Web. La hauteur inférieure est définie au niveau de l'application de sorte que le bas de la vue Web ne se trouve pas dans la zone de barre horizontale noire, afin qu'il n'entrave pas l'affichage du contenu dans la vue Web.

Cependant, chaque application est très différente et la vue Web à l'intérieur sera affichée différemment. S'il n'y a pas de hauteur inférieure dans l'application, le contenu inférieur de la vue Web sera bloqué par une petite barre noire. En termes de compatibilité des styles de page Web, il doit être compatible avec la « frange » unique et le style de petite barre horizontale noire au bas de l'iPhoneX sans affecter le style des modèles précédents.

Zone sécurisée

Comprenez d'abord la zone de sécurité de l'iphoneX. La partie bleue sur l’image ci-dessous est la zone de sécurité. Les marges des deux côtés, l’encoche en haut et la petite zone de barre noire en bas sont toutes des zones dangereuses et sont des zones où le contenu peut être bloqué. Ensuite, nous devons contrôler notre contenu dans la zone de sécurité.

Solution compatible

Heureusement, lorsque l'iPhoneX est sorti, le système officiel iOS11 a également fourni WebKit Api pour être compatible avec cette différence de style.

Première étape : définir l'attribut d'ajustement de la fenêtre

viewport-fit a trois valeurs d'attribut : auto, contain et fit. La valeur par défaut est automatique.
contenir : la fenêtre visuelle contient entièrement le contenu de la page Web et le contenu de la page est affiché dans la zone de sécurité
couverture : le contenu de la page Web couvre complètement la fenêtre visuelle et le contenu de la page remplit l'écran
auto : valeur par défaut, cohérente avec contain
Par défaut, Safari affiche la situation viewport-fit=contain, comme indiqué ci-dessous. En mode paysage, le contenu de la page dans la vue Web se trouve dans la zone sécurisée. Cependant, du point de vue du style, ce n'est pas très beau et ne fait pas bon usage de la fonctionnalité plein écran offerte par l'iPhoneX.

Pour résoudre ce problème, WebKit dans iOS11 inclut une nouvelle fonction CSS env() et quatre variables d'environnement prédéfinies safe-area-inset-left, safe-area-inset-right, safe-area-inset-top et safe-area-inset-bottom. Ces quatre variables d'environnement représentent la distance de la zone de sécurité.

  • safe-area-inset-left : La distance entre la zone de sécurité et la limite gauche
  • safe-area-inset-right : La distance entre la zone de sécurité et la limite droite
  • safe-area-inset-top : La distance entre la zone de sécurité et la limite supérieure
  • safe-area-inset-bottom : La distance entre la zone de sécurité et la limite inférieure

ios11.2 utilisait la fonction constants(), mais plus tard, elle a été remplacée par la fonction env() dans la version ios11.2. Afin d'être compatible avec les deux, vous pouvez écrire les deux.

Étape 2 : Définir la distance de la zone de sécurité

.post {
    remplissage : 12 px ;
    padding-left : constantes (safe-area-inset-left) ; //ios<11.2
    padding-left : env(safe-area-inset-left); //ios>=11.2
}

De cette façon, lorsqu'il n'est pas dans la zone de sécurité, env(safe-area-inset-left) n'est pas égal à 0, ce qui entraînera la définition d'une distance de sécurité sur padding-left afin que le contenu ne soit pas bloqué.

Ce qui précède est le cas où il est bloqué par des « franges ». En fait, dans la plupart des cas, la petite barre noire en bas bloque la barre flottante, plus le jugement de support d'attribut@supports , le CSS à l'intérieur ne sera exécuté que lorsque env(safe-area-inset-bottom) est pris en charge par le navigateur. 

.barre inférieure{
  largeur : 100 % ;
  poste : fixe ;
  bas : 0 ;
  fond : bleu ;
}
@supports (padding-bottom : env(safe-area-inset-bottom)) {
    .barre inférieure {
      padding-bottom : constant (safe-area-inset-bottom) ;
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

Remarque : La vue Web dans WeChat est dans l'état par défaut viewport-fit=cover. Il vous suffit de fixer une distance de sécurité. La solution ci-dessus est également applicable à l'applet WeChat.