CSSを使用してポートレートまたはランドスケープの表示を検出する方法

メディアクエリを使用する方法: CSSのメディアクエリを使用して、ビューポートの幅と高さを基準にしてポートレートまたはランドスケープの表示を検出することができます。以下は、ポートレートの表示を検出するメディアクエリの例です。

@media (orientation: portrait) {
  /* ポートレートの表示に対するスタイルをここに追加する */
}

同様に、以下はランドスケープの表示を検出するメディアクエリの例です。

@media (orientation: landscape) {
  /* ランドスケープの表示に対するスタイルをここに追加する */
}

JavaScriptを使用する方法: CSSだけでなく、JavaScriptも使用してポートレートまたはランドスケープの表示を検出することができます。以下は、JavaScriptを使用してポートレートまたはランドスケープの表示を検出する例です。

if (window.matchMedia("(orientation: portrait)").matches) {
  // ポートレートの表示に対する処理をここに追加する
} else if (window.matchMedia("(orientation: landscape)").matches) {
  // ランドスケープの表示に対する処理をここに追加する
}

これらの方法を使用することで、ポートレートまたはランドスケープの表示を検出し、それに応じてスタイルやレイアウトを調整することができます。ウェブページの表示を最適化するために、適切なメディアクエリまたはJavaScriptコードを選択して実装してください。