Fonctionnalité de fractionnement d’écran de support CSS pour la détection à deux écrans (déconseillée)

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.

Attention

Cette API CSS est uniquement disponible dans la version stable actuelle (version 95) avec l’indicateur fonctionnalités Web expérimentales activé. La syntaxe indiquée sur cette page sera dépréciée en faveur d’une nouvelle syntaxe.

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, utilisez une version mise à jour de cette syntaxe où a été remplacé par et vertical-viewport-segments .

Visitez la nouvelle API documenatation pour écrire sur la dernière API.

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.

Valeurs de répartition d’écran

La syntaxe CSS pour déclarer les styles lorsque le navigateur est fractionné est :

@media (screen-spanning: <value>) { }

Les valeurs autorisées sont les suivantes :

single-fold-vertical

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).

single-fold-horizontal

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 (screen-spanning: single-fold-vertical) {
   /* styles applied in double-portrait (wide) mode */
   /* matches Figure 1. below */
}
@media (screen-spanning: single-fold-horizontal) {
   /* 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 du pli de l’appareil (charnière, zone de masquage), par conséquent calculent la géométrie des 2 régions d’affichage.

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

env(fold-top);
env(fold-left);
env(fold-width);
env(fold-height);

Deux variables supplémentaires- fold-bottom et fold-right -seront disponibles dans une version ultérieure. Vous pouvez les calculer à l’aide des valeurs disponibles (en fonction de l’orientation de l’appareil) :

/*single-fold-vertical*/
calc(env(fold-left) + env(fold-width)) /* fold-right */
env(fold-height) /* equivalent to fold-bottom */

/*single-fold-horizontal*/
env(fold-width) /* equivalent to fold-right */
calc(env(fold-top) + env(fold-width)) /* fold-bottom */

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 (screen-spanning: single-fold-vertical), (screen-spanning: single-fold-horizontal) {
   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(fold-left);

   /* 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: env(fold-width);

   overflow-y: scroll;
}

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

   margin: 0;
   overflow: hidden;
}

.figure img {
   height: 100%;
}