管理螢幕方向
螢幕方向是指瀏覽器 視口 是處於橫向模式（即視口寬度大於其高度），還是縱向模式（視口高度大於其寬度）。
CSS 提供了 orientation 媒體功能，允許根據螢幕方向調整佈局。
螢幕方向 API 提供了一個可程式設計的 JavaScript API，用於處理螢幕方向，包括將視口鎖定到特定方向的功能。
根據方向調整佈局
方向更改最常見的用例之一是，您希望根據裝置的方向修改內容的佈局。例如，您可能希望按鈕欄沿著裝置顯示器的最長尺寸拉伸。透過使用媒體查詢，您可以輕鬆地自動完成此操作。
讓我們用以下 HTML 程式碼舉個例子
<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 依賴於方向媒體查詢來處理基於螢幕方向的特定樣式
/* 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;
}
一旦有了通用樣式，我們就可以開始定義方向的特殊情況
/* 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;
}
}
這是結果
| 縱向 | 橫向 |
|---|---|
|
|
|
注意：方向媒體查詢實際上是基於瀏覽器視窗（或 iframe）的方向，而不是裝置的方向。
鎖定螢幕方向
某些裝置（主要是移動裝置）可以根據自身方向動態更改螢幕方向，以確保使用者始終能夠讀取螢幕上的內容。雖然這種行為非常適合文字內容，但有些內容會受到這種更改的負面影響。例如，基於裝置方向的遊戲可能會被這種方向更改弄亂。
螢幕方向 API 旨在防止或處理這種更改。
監聽方向更改
每次螢幕方向更改時，都會觸發 ScreenOrientation 介面的 change 事件。
screen.orientation.addEventListener("change", () => {
console.log(`The orientation of the screen is: ${screen.orientation}`);
});
防止方向更改
任何 Web 應用程式都可以鎖定螢幕以滿足自身需求。使用 screen.orientation.lock() 方法鎖定螢幕，並使用 screen.orientation.unlock() 方法解鎖螢幕。
screen.orientation.lock() 方法接受以下值之一來定義要應用的鎖定型別：any、natural、portrait-primary、portrait-secondary、landscape-primary、landscape-secondary、portrait 和 landscape。
screen.orientation.lock();
它返回一個 Promise，該 Promise 在鎖定成功後解析。
注意：螢幕鎖定是 Web 應用程式相關的。如果應用程式 A 被鎖定為 landscape，而應用程式 B 被鎖定為 portrait，則從應用程式 A 切換到 B 或從 B 切換到 A 不會觸發 ScreenOrientation 上的 change 事件，因為兩個應用程式都將保持它們原來的方向。
但是，如果方向必須更改以滿足鎖定要求，則鎖定方向可能會觸發 change 事件。