JavaScript を使用してタッチ スクリーン デバイスの向きの変化を検出するにはどうすればよいですか?

JavaScript を使用したデバイスの向きの変更の検出

iPad や Galaxy Tab などのクロスプラットフォーム デバイスは回転することができ、その結果、デバイスの向きが変化します。方向性。これらの向きの変化を検出することは、応答性が高くユーザーフレンドリーな Web アプリケーションを作成するために非常に重要です。

JavaScript は向きの変化を検出できますか?

はい、JavaScript を他の技術と組み合わせると、これにより、開発者は iPad や Galaxy Tab などのタッチ スクリーン デバイスの方向の変化を検出できます。

CSS メディア クエリの使用

以前は、CSS メディア クエリは方向の検出に一般的に使用されていました。変化します。ただし、このメソッドは現在非推奨で信頼性が低いとみなされています。

ScreenOrientation API への更新

現在のベスト プラクティスは、screenOrientation インターフェイスを公開する ScreenOrientation API を使用することです。

イベントの処理と実装

JavaScript で向きの変化の検出を実装するには、次の手順に従います。

1. 追加DOMContentLoaded イベントのリスナー。
2. 現在の画面の向きを表示する関数を定義します。
3. screen.orientation オブジェクトの onchange イベント ハンドラーを登録します。
4. 向きを出力します。

コード例:

次の JavaScript コードは、ScreenOrientation API を使用して方向の変化を検出する方法を示しています。

window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("o9n");
  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    // Perform conditional logic based on the orientation
  };
  if (screen && screen.orientation !== null) {
    try {
      window.screen.orientation.onchange = displayOrientation;
      displayOrientation();
    } catch (e) { output.innerHTML = e.message; }
  }
});

HTML 例:

方向情報を表示するには、次の HTML コードをページに追加します:

Orientation: <span>

この改訂されたソリューションでは、最新のScreenOrientation API を使用して、最新のタッチ スクリーン デバイスでの方向の変化を確実に検出します。

以上がJavaScript を使用してタッチ スクリーン デバイスの向きの変化を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。