JavaScript を使用してモバイル ブラウザの向きの変化を検出するにはどうすればよいですか?

JavaScript を使用したモバイル デバイス上のブラウザの向きの変化の検出

最新のモバイル ブラウザには、デバイスの向きの変化を検出する方法が用意されており、開発者は、現在の状況に基づいてユーザー インターフェイスを調整したり、さまざまなエクスペリエンスを提供したりできます。 orientation.

画面の向き API を使用した向きの検出

最新のブラウザで向きの変化を検出するための推奨される方法は、screen.orientation API を使用することです。この API は、onchange イベントを公開する screenOrientation インターフェイスを提供します。デバイスの向きが変わると、このイベントがトリガーされ、それに応じて 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 中国語 Web サイトの他の関連記事を参照してください。