Característica de expansión de pantalla multimedia de CSS para la detección en dos pantallasCSS media screen-spanning feature for dual-screen detection

Importante

En este artículo se describen la funcionalidad y las instrucciones que se encuentran en versión preliminar pública , por lo que pueden modificarse de forma sustancial antes de que estén disponibles con carácter general.This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft no ofrece ninguna garantía, expresa o implícita, con respecto a la información que se ofrece aquí.Microsoft makes no warranties, express or implied, with respect to the information provided here.

La característica de contenido multimedia de CSS de expansión se puede usar para comprobar si el dispositivo de salida es una pantalla dual (o doblado) y la ventanilla del explorador se extiende por las dos regiones de visualización.The spanning CSS media feature can be used to test whether the output device is a dual-screen (or foldable) and the browser viewport is spanned across the two display regions.

Valores de la expansión de pantallaScreen-spanning values

La sintaxis de CSS para declarar estilos para cuando el explorador está distribuida es:CSS syntax to declare styles for when the browser is spanned is:

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

Los valores permitidos son:The allowed values are:

single-fold-vertical

Describe el estado de cuando la ventanilla del explorador se extiende por un solo pliegue (dos regiones de presentación) y la posición del pliegue es vertical.Describes the state of when the browser viewport is spanning across a single fold (two display regions) and the fold posture is vertical. Este valor coincide con Surface Duo en modo de doble vertical (ancho).This value matches Surface Duo in double-portrait (wide) mode.

single-fold-horizontal

Describe el estado de cuando la ventanilla del explorador se extiende por un solo pliegue (dos regiones de presentación) y la posición del pliegue es horizontal.Describes the state of when the browser viewport is spanning across a single fold (two display regions) and the fold posture is horizontal. Este valor coincide con Surface Duo en modo doble vertical (alto).This value matches Surface Duo in double-portrait (tall) mode.

En este fragmento de código CSS de ejemplo se muestra cómo usar la screen-spanning característica multimedia:This example CSS snippet shows how to use the screen-spanning media feature:

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

Dos orientaciones de Surface Duo, doble vertical y doble horizontal

Variables de entorno de CSSCSS environment variables

Los desarrolladores web pueden utilizar variables de entorno definidas por el explorador para obtener la geometría del pliegue del dispositivo (bisagra, área de máscara), por lo que calculan la geometría de las dos regiones de visualización.Web developers can utilize browser-defined environment variables to get the geometry of the device fold (hinge, mask area), therefore calculate the geometry of the 2 display regions.

Variables del env de CSS en un dispositivo de pantalla dual en modo vertical doble

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

fold-bottom fold-right En una versión futura habrá dos variables adicionales y estarán disponibles.Two additional variables - fold-bottom and fold-right - will be available in a future release. Puede calcularlas con los valores disponibles (según la orientación del dispositivo):You can calculate these using the available values (depending on the orientation of the device):

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

EjemplosExamples

BásicoBasic

Cree una página receptiva en la que el <body> color de fondo se establezca yellow en teléfonos y green en dispositivos de pantalla dual en cualquier postura.Create a responsive page where the <body> background-color is set to yellow on phones and green on dual-screen devices in any posture.

Ilustración de la salida de ejemplo básica

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

FlexboxFlexbox

Use Flexbox para crear un diseño de dos columnas compatible con el hueco, donde la primera columna contiene una descripción desplazable y la segunda columna contiene la imagen.Use flexbox to create a gap-aware two column layout where the first column contains a scrollable description and the second column contains the image.

Demostración de CSS de doble pantalla

A continuación se muestra el código HTML y CSS para crear este diseño:The HTML and CSS to create this layout is shown below:

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