如何使用 JavaScript 检测移动浏览器中的方向变化？

使用 JavaScript 检测移动设备上浏览器的方向变化

现代移动浏览器提供了检测设备方向变化的方法，允许开发者根据当前情况调整用户界面或提供不同的体验

使用屏幕方向 API 检测方向

在现代浏览器中检测方向变化的首选方法是使用 screen.orientation API。此 API 提供 screenOrientation 接口，该接口公开 onchange 事件。当设备方向发生变化时，会触发此事件，让您的 JavaScript 代码做出相应响应。

要使用此 API，您可以执行以下操作：

1. 添加事件screenorientation.onchange 事件的侦听器。
2. 在事件处理程序中，使用以下命令检索当前方向screen.orientation.type。
3. 检查方向值（例如，横向为主、纵向为次要）并采取适当的操作。

以下是示例片段：

window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("o9n");

  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    // Check the orientation and log messages accordingly
  };

  if (screen && screen.orientation !== null) {
    try {
      window.screen.orientation.onchange = displayOrientation;
      displayOrientation();
    } catch (e) {
      output.innerHTML = e.message;
    }
  }
});