Verwaltung der Bildschirmorientierung

Anpassung des Layouts basierend auf der Orientierung

Einer der häufigsten Fälle für Orientierungswechsel ist, wenn Sie das Layout Ihres Inhalts basierend auf der Geräteorientierung ändern möchten. Zum Beispiel möchten Sie möglicherweise, dass eine Button-Leiste entlang der längsten Dimension des Geräts angezeigt wird. Mit einer Medienabfrage können Sie dies einfach und automatisch tun.

Hier 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 verwendet die orientation-Medienabfrage, um spezifische Stile 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 Stile haben, können wir einen Sonderfall 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

Sperren der Bildschirmorientierung

Einige Geräte (hauptsächlich mobile Geräte) können die Bildschirmorientierung dynamisch basierend auf ihrer eigenen Orientierung ändern, um sicherzustellen, dass der Benutzer immer lesen kann, was auf dem Bildschirm angezeigt wird. Während dieses Verhalten für Textinhalt gut geeignet ist, gibt es einige Inhalte, die durch eine solche Änderung negativ beeinflusst werden können. Beispielsweise könnten Spiele, die auf der Geräteorientierung basieren, durch eine Änderung der Orientierung beeinträchtigt werden.

Die Screen Orientation API wurde entwickelt, um solch eine Änderung zu verhindern oder zu handhaben.

Zuhören auf Orientierungsänderungen

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

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

Verhindern einer Orientierungsänderung

Jede Webanwendung kann den Bildschirm entsprechend ihrer eigenen Bedürfnisse 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();

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

Siehe auch

• screen.orientation
• ScreenOrientation
• change-Ereignis von ScreenOrientation
• Die Orientierung-Medienabfrage