Verwaltung der Bildschirmorientierung

Einer der häufigsten Fälle für Orientierungsänderungen ist der, bei dem Sie das Layout Ihres Inhalts entsprechend der Orientierung des Geräts überarbeiten möchten. Beispielsweise möchten Sie vielleicht eine Button-Leiste entlang der längsten Dimension des Geräts anzeigen lassen. Mit einer Media-Query können Sie dies einfach und automatisch tun.

Hier ist ein Beispiel mit folgendem HTML-Code:

<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec
  sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt
  leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut
  interdum tristique dapibus. Nullam quis malesuada est.
</p>

CSS verlässt sich auf die Media-Query für die Orientierung, um spezifische Styles basierend auf der Bildschirmorientierung zu handhaben.

/* First let's define some common styles */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font: 1em sans-serif;
  margin: 0;
  padding: 0.5em;
}

ul {
  list-style: none;

  font: 1em monospace;
  margin: 0;
  padding: 0.5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin: 0;
  padding: 0.5em;
  background: white;
}

Sobald wir einige allgemeine Styles haben, können wir einen speziellen Fall für die Orientierung definieren.

/* For portrait, we want the toolbar on top */

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/* For landscape, we want the toolbar stick on the left */

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: 0.5em;
  }
}

Und hier ist das Ergebnis:

Einige Geräte (hauptsächlich mobile Geräte) können die Orientierung des Bildschirms basierend auf ihrer eigenen Orientierung dynamisch ändern, sodass der Benutzer immer lesen kann, was auf dem Bildschirm steht. Während dieses Verhalten für Textinhalte perfekt geeignet ist, gibt es einige Inhalte, die durch eine solche Änderung negativ beeinflusst werden können. Beispielsweise könnten Spiele, die auf die Orientierung des Geräts basieren, durch eine solche Veränderung der Orientierung gestört werden.

Die Screen Orientation API dient dazu, eine solche Änderung zu verhindern oder zu handhaben.

Jedes Mal, wenn sich die Orientierung des Bildschirms ändert, wird das change-Ereignis der ScreenOrientation-Schnittstelle ausgelöst:

screen.orientation.addEventListener("change", () => {
  console.log(`The orientation of the screen is: ${screen.orientation}`);
});

Jede Web-Anwendung kann den Bildschirm nach ihren eigenen Bedürfnissen sperren. Der Bildschirm wird mit der Methode screen.orientation.lock() gesperrt und mit der Methode screen.orientation.unlock() entsperrt.

Die Methode screen.orientation.lock() akzeptiert einen der folgenden Werte, um die Art der Sperre zu definieren: any, natural, portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait und landscape:

screen.orientation.lock();

Es gibt ein Promise zurück, das aufgelöst wird, nachdem die Sperre erfolgreich war.

• screen.orientation
• ScreenOrientation
• change-Ereignis von ScreenOrientation
• Die Media-Query für die Orientierung