ScreenOrientation: lock() 方法
ScreenOrientation 接口的 lock() 方法可以将包含文档的方向锁定到指定方向。
通常，方向锁定仅在移动设备上以及浏览器上下文全屏时启用。如果支持锁定，则它必须适用于下面列出的所有参数值。
语法
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。
异常
该 Promise 可能会因以下异常而被拒绝：
InvalidStateErrorDOMException-
如果文档未完全激活，则会抛出此异常。
SecurityErrorDOMException-
如果文档的可见性状态为隐藏，或者如果文档被禁止使用该功能（例如，通过省略
iframe元素的sandbox属性中的allow-orientation-lock关键字），则会抛出此异常。 NotSupportedErrorDOMException-
如果用户代理不支持锁定特定方向的屏幕方向，则会抛出此异常。
AbortErrorDOMException-
如果在锁定 Promise 待处理期间调用了其他
lock()方法，或者调用了unlock()，则会抛出此异常。
示例
此示例演示了如何将屏幕锁定到与当前方向相反的方向。请注意，此示例仅在支持方向更改的移动设备和其他设备上有效。
<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 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 |
浏览器兼容性
加载中…