ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript を使用してモバイル ブラウザの向きの変化を検出するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-11-24 09:31:12
オリジナル
169 人が閲覧しました

How Can I Detect Orientation Changes in Mobile Browsers using 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート