管理屏幕方向

术语屏幕方向指的是浏览器视口是处于横向模式（即视口的宽度大于其高度），还是处于纵向模式（视口的高度大于其宽度）。

CSS 提供了orientation媒体功能，允许根据屏幕方向调整布局。

该屏幕方向 API提供了一个程序化的 JavaScript API，用于处理屏幕方向，包括锁定视口到特定方向的功能。

根据方向调整布局

方向更改最常见的情况之一是，您希望根据设备的方向修改内容的布局。例如，您可能希望按钮栏沿着设备显示器的最长尺寸延伸。通过使用媒体查询，您可以轻松自动地实现这一点。

让我们以以下 HTML 代码为例

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 依靠方向媒体查询来根据屏幕方向处理特定的样式。

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;
}

一旦我们拥有了一些通用样式，我们就可以开始为方向定义一个特殊情况。

css
/* 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 用于防止或处理此类更改。

监听方向更改

每次屏幕方向发生变化时，change事件的ScreenOrientation接口被触发。

js
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。

js
screen.orientation.lock();

它返回一个promise，该 promise 在锁定成功后解析。

注意：屏幕锁定取决于 Web 应用程序。如果应用程序 A 锁定到landscape，而应用程序 B 锁定到portrait，则从应用程序 A 切换到 B 或从 B 切换到 A 不会在ScreenOrientation上触发change事件，因为这两个应用程序都将保持它们具有的方向。

但是，如果必须更改方向以满足锁定要求，则锁定方向可能会触发change事件。

另请参阅