一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
Screen Orientation 是屏幕方向 API，屏幕方向和设备方向不完全相同，它们可以是同一方向，也可以是不同方向。Screen Orientation 就是处理屏幕方向的 API。
处理屏幕方向可以只使用 CSS，可以使用 screen 的媒体查询能力来进行判断，通过屏幕的宽高情况进而得出是横向还是纵向，类似下面这样：
@media screen and (orientation: portrait) {
}
@media screen and (orientation: landscape) {
}
根据浏览器窗口的方向我们可以选择显示横向或纵向两种风格的 UI 效果。
除了使用 CSS，我们也可以使用 JS 来完成这些工作，这里就需要用到 Screen Orientation 相关的 API 了。
首先来看一个很重要的事件 orientationchange，这个事件会在屏幕方向发生改变时触发，我们就可以根据需要进行一系列操作。
screen.addEventListener("orientationchange", function () {
console.log("The orientation of the screen is: " + screen.orientation);
});
我们也可以根据需要进行屏幕方向的锁定，这时可以调用 lockOrientation 方法，之后屏幕方向可以不发生变化，我们只提供一个方向的 UI 即可。对应的还有解除锁定的 unlockOrientation 方法，解除后恢复可转状态。
screen.lockOrientation('landscape');
上面的一系列 API 都位于 screen 上，screen 位于全局的 window 下，可以直接获取，screen 下面有一系列描述屏幕信息的属性和方法，我们可以根据需要读取，与本文主题有关的是 orientation，这是一个只读的属性，它描述了当前的屏幕方向。
此外，在 PWA 的 manifest 文件中也可以对屏幕方向进行定义，可以通过 orientation 属性来进行设置，这个属性只在部分浏览器生效，PWA 开发者可以关注。
有关屏幕方向的基础 API 就介绍这么多，根据这些可以完成一些适配的工作。
