Bildschirm Aufteilungs Funktion für CSS-Medien für die Dual-Screen-ErkennungCSS media screen-spanning feature for dual-screen detection

Wichtig

In diesem Artikel werden Funktionen und Anleitungen beschrieben, die sich in der öffentlichen Vorschau befinden und vor der allgemeinen Verfügbarkeit noch wesentlich geändert werden können.This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft übernimmt keine Garantie, weder ausdrücklich noch stillschweigend, für die hier bereitgestellten Informationen.Microsoft makes no warranties, express or implied, with respect to the information provided here.

Mit dem CSS Feature "übergreifende CSS-Medien" können Sie überprüfen, ob es sich bei dem Ausgabegerät um einen Dual-Screen (oder einen Speichertyp) handelt und ob der Browser-Viewport über die beiden Anzeige Bereiche überspannt ist.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.

Bildschirm Aufteilungs WerteScreen-spanning values

CSS-Syntax zum Deklarieren von Stilen für den Fall, dass der Browser überspannt ist:CSS syntax to declare styles for when the browser is spanned is:

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

Zulässige Werte sind:The allowed values are:

single-fold-vertical

Beschreibt den Zustand, in dem sich der browserviewport über eine einzelne Fold (zwei Anzeige Bereiche) erstreckt und die Fold-Position vertikal ist.Describes the state of when the browser viewport is spanning across a single fold (two display regions) and the fold posture is vertical. Dieser Wert entspricht dem Surface-Duo im Double-Hochformat (Wide)-Modus.This value matches Surface Duo in double-portrait (wide) mode.

single-fold-horizontal

Beschreibt den Zustand, in dem sich der browserviewport über eine einzelne Fold (zwei Anzeige Bereiche) erstreckt und die Fold-Position horizontal ist.Describes the state of when the browser viewport is spanning across a single fold (two display regions) and the fold posture is horizontal. Dieser Wert entspricht Surface Duo im Double-Hochformat-Modus (hoch).This value matches Surface Duo in double-portrait (tall) mode.

In diesem Beispiel-CSS-Code Ausschnitt wird gezeigt, wie die screen-spanning Medien Funktion verwendet wird: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 */
}

Zwei Ausrichtungen des Surface-Duos, Double-und Double-Querformat

CSS-UmgebungsvariablenCSS environment variables

Webentwickler können Browser definierte Umgebungsvariablen verwenden, um die Geometrie des Geräte Fold (Scharnier, Masken Bereich) zu erhalten. Daher berechnen Sie die Geometrie der 2 Anzeige Bereiche.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.

CSS-ENV-Variablen auf einem Dual-Screen-Gerät im doppelten Hochformat Modus

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

fold-bottomIn einer zukünftigen Version sind zwei zusätzliche Variablen (und) fold-right verfügbar.Two additional variables - fold-bottom and fold-right - will be available in a future release. Sie können diese mithilfe der verfügbaren Werte (abhängig von der Ausrichtung des Geräts) berechnen: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 */

BeispieleExamples

StandardBasic

Erstellen Sie eine reaktionsfähige Seite, bei der die <body> Hintergrundfarbe yellow auf Smartphones und green auf Dual-Screen-Geräten in beliebiger Situation festgelegt ist.Create a responsive page where the <body> background-color is set to yellow on phones and green on dual-screen devices in any posture.

Abbildung der grundlegenden Beispielausgabe

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

Verwenden Sie Flexbox zum Erstellen eines lückenlosen zwei spaltigen Layouts, bei dem die erste Spalte eine Bild lauffähige Beschreibung enthält und die zweite Spalte das Bild enthält.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.

Dual-Screen-CSS-Demo

Der HTML-und der CSS-Code zum Erstellen dieses Layouts sind unten dargestellt: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%;
}