管理屏幕方向
屏幕方向是指浏览器 视口 是处于横向模式（即视口宽度大于其高度），还是纵向模式（视口高度大于其宽度）。
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 事件。