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 |
瀏覽器相容性
載入中…