如何使用 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;
    }
  }
});

以上是如何使用 JavaScript 偵測行動瀏覽器中的方向變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！