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.

但是，每个app千差万别，里面的webview也就展现不一，如果没有app底部高度，那么webview里面的底部内容就会被小黑条遮挡。从网页样式兼容性来说，需要兼容iphoneX后特有的“齐刘海”和底部小黑横条样式，又不影响以前机型的样式。

zone sûre

Jetons d’abord un coup d’œil à la zone de sécurité de l’iPhone

Solutions compatibles

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.

第一步：设置viewport-fit属性

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
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 fournie par l'iPhoneX.

为了解决这个问题，ios11中的WebKit包括了一个新的CSS函数env()，以及四个预定义的环境变量safe-area-inset-left,safe-area-inset-right,safe-area-inset-topetsafe-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 : distance entre la zone de sécurité et la limite supérieure
  • safe-area-inset-bottom : distance entre la zone de sécurité et la limite inférieure

Avant iOS11.2, la fonction constants() était utilisée, mais plus tard, elle a été remplacée par la fonction env() dans 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 {
    padding: 12px;
    padding-left: constants(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é.

Le cas ci-dessus est le cas où il est bloqué par une « frange ». En fait, dans la plupart des cas, la petite barre noire en bas bloque la barre flottante, et les attributs soutiennent le jugement.@supports,seulementenv(safe-area-inset-bottom)被浏览器支持的时候才会执行里面的css。

 

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant( safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

Remarque : La vue Web dans WeChat est 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.