horizontal-viewport-segments

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La caractéristique média CSS horizontal-viewport-segments permet de détecter si l'appareil possède un nombre spécifié de segments de zone d'affichage disposés horizontalement (côte à côte).

En lien avec l'API Viewport Segments, la caractéristique vertical-viewport-segments permet de créer des conceptions adaptatives qui fonctionnent bien sur les appareils à multiples zones d'affichage — des appareils dont l'écran est divisé en segments logiquement séparés, comme les appareils pliables ou à charnière.

Syntaxe

La caractéristique horizontal-viewport-segments se définit comme une valeur entière de 1 ou plus, représentant le nombre de segments horizontaux de la zone d'affichage de l'appareil.

La valeur sera 1 pour :
- Un appareil non pliable (par exemple, un smartphone ou une tablette à écran unique classique)
- Un appareil pliable, déplié ou fermé (en posture de l'appareil continuous).
- Un appareil à deux écrans à charnière ou un appareil pliable actuellement plié et orienté verticalement, avec les segments l'un au-dessus de l'autre.
La valeur sera 2 pour un appareil à deux écrans à charnière ou un appareil pliable actuellement plié (en posture de l'appareil folded) et orienté horizontalement, avec les segments côte à côte.
La valeur peut être supérieure à 2 pour les appareils pliables comportant plus d'un pli.

Exemples

Utilisation basique de `horizontal-viewport-segments`

Dans cet extrait, on utilise une requête média horizontal-viewport-segments pour gérer le cas des appareils pliables où les segments sont côte à côte.

On définit la largeur du conteneur de gauche comme étant égale à la largeur du segment gauche (env(viewport-segment-width 0 0)), et celle du conteneur de droite comme étant égale à la largeur du segment droit (env(viewport-segment-width 1 0)).

Pour calculer la largeur occupée par le pli entre les deux, on soustrait le décalage du bord gauche du conteneur de droite à celui du bord droit du conteneur de gauche (calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));).

css

.wrapper {
  height: 100%;
  display: flex;
}

@media (horizontal-viewport-segments: 2) {
  .wrapper {
    flex-direction: row;
  }

  .list-view {
    width: env(viewport-segment-width 0 0);
  }

  .fold {
    width: calc(
      env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)
    );
    background-color: black;
    height: 100%;
  }

  .detail-view {
    width: env(viewport-segment-width 1 0);
  }
}

Consultez notre démo de l'API Viewport Segments ^(angl.) pour une démonstration complète (code source ^(angl.)). Vous pouvez aussi lire Utiliser l'API Viewport Segments pour une explication détaillée de la démo.