Query sui segmenti di viewport CSS per il rilevamento a doppio schermo

Articolo
07/10/2023

La funzionalità CSSmedia estesa può essere usata per verificare se il dispositivo di output è un doppio schermo (o piegabile) e il riquadro di visualizzazione del browser è esteso tra le due aree di visualizzazione. Le variabili di ambiente sono disponibili anche per calcolare le aree visibili sugli schermi e l'area della cerniera (se presente) tra di esse.

Questa API è disponibile in Microsoft Edge versione 97 e successive.

Segmenti del riquadro di visualizzazione

Sintassi CSS per dichiarare gli stili per quando il browser è esteso su una cerniera orizzontale o verticale:

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

Per Surface Duo, i valori che corrisponderanno alla visualizzazione a doppio schermo sono:

horizontal-viewport-segments: 2

Descrive lo stato di quando il riquadro di visualizzazione del browser si estende su una singola piega (due aree di visualizzazione) e la posizione di piegatura è verticale. Questo valore corrisponde a Surface Duo in modalità verticale doppia (wide).

vertical-viewport-segments: 2

Descrive lo stato di quando il riquadro di visualizzazione del browser si estende su una singola piega (due aree di visualizzazione) e il comportamento di piegatura è orizzontale. Questo valore corrisponde a Surface Duo in modalità orizzontale doppio (alto).

Questo frammento di codice CSS di esempio mostra come usare le -viewport-segments funzionalità multimediali per applicare stili a un dispositivo Surface Duo:

@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 */
}

Surface Duo's two orientations, double portrait and double landscape

Variabili di ambiente CSS

Gli sviluppatori Web possono utilizzare variabili di ambiente definite dal browser per ottenere la geometria dell'area di visualizzazione (o delle aree) e calcolare la geometria dell'area della cerniera nascosta (se presente). Le proprietà di ogni viewport possono essere sottoposte a query con le definizioni di variabili di ambiente seguenti (usando le coordinate del segmento in alto a sinistra):

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

Le coordinate vengono assegnate dal segmento superiore sinistro:

CSS env variable coordinates example

Questi valori possono essere usati per dedurre le coordinate delle aree della cerniera:

CSS env variables on a dual-screen device in double portrait mode

/* 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 */

Esempio

Basic

Creare una pagina reattiva in cui il <body> colore di sfondo è impostato su yellow nei telefoni e green nei dispositivi a doppio schermo in qualsiasi posizione.

Illustration of the basic example output

/* 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

Usare flexbox per creare un layout di due colonne compatibile con gap in cui la prima colonna contiene una descrizione scorrevole e la seconda colonna contiene l'immagine.

Dual-screen CSS demo

Il codice HTML e CSS per creare questo layout è illustrato di seguito:

   <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%;
}

Condividi tramite