ScreenOrientation: lock() Methode

Syntax

lock(orientation)

Parameter

orientation

Ein Ausrichtungssperrtyp. Einer der folgenden:

"any"

Eine der portrait-primary, portrait-secondary, landscape-primary oder landscape-secondary.

"natural"

Die natürliche Ausrichtung des Bildschirms vom zugrunde liegenden Betriebssystem: entweder portrait-primary oder landscape-primary.

"landscape"

Eine Ausrichtung, bei der die Bildschirmbreite größer ist als die Bildschirmhöhe. Abhängig von der Plattformkonvention kann dies landscape-primary, landscape-secondary oder beides sein.

"portrait"

Eine Ausrichtung, bei der die Bildschirmhöhe größer ist als die Bildschirmbreite. Abhängig von der Plattformkonvention kann dies portrait-primary, portrait-secondary oder beides sein.

"portrait-primary"

Der "primäre" Porträtmodus. Wenn die natürliche Ausrichtung ein Porträtmodus ist (Bildschirmhöhe größer als Breite), entspricht dies der natürlichen Ausrichtung und einem Winkel von 0 Grad. Wenn die natürliche Ausrichtung ein Landschaftsmodus ist, kann der User-Agent eine der beiden Porträtausrichtungen als portrait-primary und portrait-secondary wählen; eine dieser Ausrichtungen wird auf einen Winkel von 90 Grad und die andere auf 270 Grad gesetzt.

"portrait-secondary"

Die sekundäre Porträtausrichtung. Wenn die natürliche Ausrichtung ein Porträtmodus ist, hat dieser einen Winkel von 180 Grad (mit anderen Worten, das Gerät ist relativ zu seiner natürlichen Ausrichtung auf den Kopf gestellt). Wenn die natürliche Ausrichtung ein Landschaftsmodus ist, kann dies eine der beiden vom User-Agent ausgewählten Ausrichtungen sein: die, die nicht für portrait-primary ausgewählt wurde.

"landscape-primary"

Der "primäre" Landschaftsmodus. Wenn die natürliche Ausrichtung ein Landschaftsmodus ist (Bildschirmbreite größer als Höhe), entspricht dies der natürlichen Ausrichtung und einem Winkel von 0 Grad. Wenn die natürliche Ausrichtung ein Porträtmodus ist, kann der User-Agent eine der beiden Landschaftsausrichtungen als landscape-primary mit einem Winkel von entweder 90 oder 270 Grad wählen (landscape-secondary wird die andere Ausrichtung und Winkel sein).

"landscape-secondary"

Der sekundäre Landschaftsmodus. Wenn die natürliche Ausrichtung ein Landschaftsmodus ist, ist diese Ausrichtung im Vergleich zur natürlichen Ausrichtung auf den Kopf gestellt und hat einen Winkel von 180 Grad. Wenn die natürliche Ausrichtung ein Porträtmodus ist, kann dies eine der beiden vom User-Agent gewählten Ausrichtungen sein: die, die nicht für landscape-primary ausgewählt wurde.

Rückgabewert

Ein Promise, das nach erfolgreichem Sperren aufgelöst wird.

Ausnahmen

Das Versprechen kann mit folgenden Ausnahmen abgelehnt werden:

InvalidStateError DOMException

Wird ausgelöst, wenn das Dokument nicht vollständig aktiv ist.

SecurityError DOMException

Wird ausgelöst, wenn der Sichtbarkeitsstatus des Dokuments verborgen ist oder wenn dem Dokument die Verwendung der Funktion verboten ist (zum Beispiel durch das Weglassen des Schlüsselworts allow-orientation-lock des sandbox Attributs des iframe Elements).

NotSupportedError DOMException

Wird ausgelöst, wenn der User-Agent das Sperren der Bildschirmausrichtung für die spezifische Ausrichtung nicht unterstützt.

AbortError DOMException

Wird ausgelöst, wenn eine andere lock() Methode aufgerufen wird oder wenn unlock() aufgerufen wird, während das Sperr-Versprechen noch aussteht.

Beispiele

Dieses Beispiel zeigt, wie der Bildschirm auf die entgegengesetzte Ausrichtung der aktuellen gesperrt wird. Beachten Sie, dass dieses Beispiel nur auf mobilen Geräten und anderen Geräten funktioniert, die Ausrichtungsänderungen unterstützen.

<div id="example_container">
  <button id="fullscreen_button">Fullscreen</button>
  <button id="lock_button">Lock</button>
  <button id="unlock_button">Unlock</button>
  <textarea id="log" rows="7" cols="85"></textarea>
</div>

const log = document.getElementById("log");

// Lock button: Lock the screen to the other orientation (rotated by 90 degrees)
const rotateBtn = document.querySelector("#lock_button");
rotateBtn.addEventListener("click", () => {
  log.textContent += `Lock pressed \n`;

  const oppositeOrientation = screen.orientation.type.startsWith("portrait")
    ? "landscape"
    : "portrait";
  screen.orientation
    .lock(oppositeOrientation)
    .then(() => {
      log.textContent = `Locked to ${oppositeOrientation}\n`;
    })
    .catch((error) => {
      log.textContent += `${error}\n`;
    });
});

// Unlock button: Unlock the screen orientation (if locked)
const unlockBtn = document.querySelector("#unlock_button");
unlockBtn.addEventListener("click", () => {
  log.textContent += "Unlock pressed \n";
  screen.orientation.unlock();
});

// Full screen button: Set the example to fullscreen.
const fullscreenBtn = document.querySelector("#fullscreen_button");
fullscreenBtn.addEventListener("click", () => {
  log.textContent += "Fullscreen pressed \n";
  const container = document.querySelector("#example_container");
  container.requestFullscreen().catch((error) => {
    log.textContent += `${error}\n`;
  });
});

Um das Beispiel zu testen, drücken Sie zuerst die Vollbild-Taste. Sobald das Beispiel im Vollbildmodus ist, drücken Sie die Sperrtaste, um die Ausrichtung zu wechseln, und Entsperren, um zur natürlichen Ausrichtung zurückzukehren.

Spezifikationen

Browser-Kompatibilität