Fenêtre d’affichage CSS segments requête de média pour la détection à deux écrans

Important

Les fonctionnalités et l’aide décrites dans cet article sont en préversion publique et peuvent faire l’objet de modifications importantes avant leur lancement en disponibilité générale. Microsoft ne donne aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Conseil

cette nouvelle version de l’API CSS à deux écrans est actuellement disponible dans Microsoft Edge Beta, Dev et les canaux d’initiés des canaries (96.0.1054.5 ou versions ultérieures), ainsi que les versions préliminaires de Google Chrome.

Si vous utilisez la version stable actuelle (version 95) avec l’indicateur de fonctionnalités Web expérimentales , suivez la documentation relative à la répartition des médias (mais sachez que la syntaxe sera remplacée par le contenu de cette page dans la version suivante).

Lafonctionnalité de bande passante CSSde fractionnement peut être utilisée pour déterminer si le périphérique de sortie est un double écran (ou pliable) et si la fenêtre d’affichage du navigateur s’étend sur les deux régions d’affichage. Les variables d’environnement sont également disponibles pour calculer les zones visibles sur les écrans et la zone de charnière (le cas échéant) entre elles.

Segments de fenêtre d’affichage

Syntaxe CSS pour déclarer les styles lorsque le navigateur s’étend sur une charnière horizontale ou verticale :

@media (horizontal-viewport-segments: <count>) { }
@media (vertical-viewport-segments: <count>) { }

Pour surface Duo, les valeurs qui correspondent à l’affichage à deux écrans sont les suivantes :

horizontal-viewport-segments: 2

  • Décrit l’état de l’affichage de la fenêtre d’affichage du navigateur sur un seul pli (deux régions d’affichage) et la position du pli verticale. Cette valeur correspond à surface Duo en mode double portrait (étendu).

vertical-viewport-segments: 2

  • Décrit l’état de l’affichage de la fenêtre d’affichage du navigateur sur un seul pli (deux régions d’affichage) et la position du pli horizontal. Cette valeur correspond à surface Duo en mode double portrait (haut).

Cet exemple d’extrait CSS montre comment utiliser la screen-spanning fonctionnalité de média :

@media (horizontal-viewport-segments: 2) {
   /* styles applied in double-portrait (wide) mode */
   /* matches Figure 1. below */
}
@media (vertical-viewport-segments: 2) {
   /* styles applied in double-landscape (tall) mode */
   /* matches Figure 2. below */
}

Deux orientations de surface Duo, double portrait et double paysage

Variables d’environnement CSS

Les développeurs Web peuvent utiliser des variables d’environnement définies par le navigateur pour obtenir la géométrie de la zone d’affichage (ou des régions) sur et calculer la géométrie de la zone de charnière masquée (le cas échéant). Les propriétés de chaque Viewport peuvent être interrogées avec les définitions de variables d’environnement suivantes (à l’aide des coordonnées du segment supérieur le plus à gauche) :

env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);

Les coordonnées sont affectées à partir du segment supérieur gauche :

Exemple de coordonnées de variables env CSS

Ces valeurs peuvent être utilisées pour déduire les coordonnées des zones de charnière :

Variables de CSS env sur un appareil à deux écrans en mode double portrait

/* double-portrait */
env(viewport-segment-right 0 0);      /* hinge left */
env(viewport-segment-left 1 0);       /* hinge right*/
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) 
                                      /* hinge width */
/* double-landscape */
env(viewport-segment-bottom 0 0);     /* hinge top */
env(viewport-segment-top 0 1);        /* hinge bottom */
calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)) 
                                      /* hinge height */

Exemples

De base

Créez une page réactive dans laquelle la <body> couleur d’arrière-plan est définie yellow sur sur les téléphones et green sur les appareils à deux écrans, quelle que soit la position.

Illustration de la sortie de l’exemple de base

/* maximum width of our customers phones is 420px */
/* spanning: none is optional in this case */
@media (max-width: 420px) {
   body {
      background-color: yellow;
   }
}

/* Separating media features with comma `,` is equivalent to the logical operation OR  */
@media (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
   body {
      background-color: green;
   }
}

Flexbox

Utilisez Flexbox pour créer une disposition à deux colonnes prenant en charge l’intervalle, où la première colonne contient une description avec défilement et où la deuxième colonne contient l’image.

Démonstration CSS à deux écrans

Le code HTML et CSS pour créer cette disposition est illustré ci-dessous :

   <body>
      <article class="article">
         ...
      </article>
      <figure class="figure">
         <img src="/sydney-opera-house.jpg"
               alt="Sydney Opera House">
      </figure>
   </body>
body {
   height: 100vh;
   display: flex;
}

.article {
   /* grow: no, shrink: no, basis: fold-left */
   flex: 0 0 env(viewport-segment-right 0 0);

   /* equals to margin-right when writing mode is left-to-right (english)  */
   /* equals to margin-left when writing mode is right-to-left (arabic, hebrew)  */
   /* this will prevent content from being rendered behind the device mask */
   margin-inline-end: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) ; /* hinge width */

   overflow-y: scroll;
}

.figure {
   /* fill the rest of the space */
   flex: 1;

   margin: 0;
   overflow: hidden;
}

.figure img {
   height: 100%;
}