ScreenOrientation: lock() 方法

有限可用性

此功能不是基线功能，因为它在一些最广泛使用的浏览器中不起作用。

lock() 方法是 ScreenOrientation 接口的方法，用于将包含文档的方向锁定到指定的方向。

通常，方向锁定仅在移动设备上以及浏览器上下文处于全屏状态下启用。如果支持锁定，则它必须适用于下面列出的所有参数值。

语法

js
lock(orientation)

参数

orientation

方向锁定类型。以下之一

"any"

portrait-primary、portrait-secondary、landscape-primary 或 landscape-secondary 中的任意一个。

"natural"

来自底层操作系统的屏幕自然方向：portrait-primary 或 landscape-primary。

"landscape"

屏幕宽度大于屏幕高度的方向。根据平台约定，这可能是 landscape-primary、landscape-secondary 或两者。

"portrait"

屏幕高度大于屏幕宽度的方向。根据平台约定，这可能是 portrait-primary、portrait-secondary 或两者。

"portrait-primary"

"主要"纵向模式。如果自然方向是纵向模式（屏幕高度大于宽度），则这将与自然方向相同，并且对应于 0 度的角度。如果自然方向是横向模式，则用户代理可以选择任一纵向方向作为 portrait-primary 和 portrait-secondary；其中之一将被分配 90 度的角度，另一个将具有 270 度的角度。

"portrait-secondary"

次要纵向方向。如果自然方向是纵向模式，则这将具有 180 度的角度（换句话说，设备相对于其自然方向倒置）。如果自然方向是横向模式，则这可以是用户代理选择的任一方向：未选择用于 portrait-primary 的方向。

"landscape-primary"

"主要"横向模式。如果自然方向是横向模式（屏幕宽度大于高度），则这将与自然方向相同，并且对应于 0 度的角度。如果自然方向是纵向模式，则用户代理可以选择任一横向方向作为 landscape-primary，角度为 90 或 270 度（landscape-secondary 将是另一个方向和角度）。

"landscape-secondary"

次要横向模式。如果自然方向是横向模式，则此方向相对于自然方向倒置，并且将具有 180 度的角度。如果自然方向是纵向模式，则这可以是用户代理选择的任一方向：未选择用于 landscape-primary 的方向。

返回值

一个 Promise，在锁定成功后解析。

异常

承诺可能会因以下异常而被拒绝

InvalidStateError DOMException

如果文档未完全激活，则抛出。

SecurityError DOMException

如果文档的可见性状态为隐藏，或者文档被禁止使用该功能（例如，通过省略 iframe 元素的 sandbox 属性的关键字 allow-orientation-lock），则抛出。

NotSupportedError DOMException

如果用户代理不支持锁定特定方向的屏幕方向，则抛出。

AbortError DOMException

如果存在任何其他 lock() 方法正在调用，则抛出。

示例

此示例演示如何将屏幕锁定到当前方向的反方向。请注意，此示例仅适用于移动设备和其他支持方向更改的设备。

html
<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>
js
const log = document.getElementById("log");

// Lock button: Lock the screen to the other orientation (rotated by 90 degrees)
const rotate_btn = document.querySelector("#lock_button");
rotate_btn.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 unlock_btn = document.querySelector("#unlock_button");
unlock_btn.addEventListener("click", () => {
  log.textContent += "Unlock pressed \n";
  screen.orientation.unlock();
});

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

要测试此示例，首先按下全屏按钮。一旦示例处于全屏状态，按下锁定按钮切换方向，然后按下解锁按钮返回到自然方向。

规范

规范
屏幕方向
# dom-screenorientation-lock

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。