CSSでスマートフォンの横画面での対応を実現！iPhone Pro Maxでも安心、PCの画面に影響せずにlandscapeを使う方法

現在関わっているプロジェクトでスマートフォンの横画面での対応が必要になりました。今までちゃんと横画面対応ってやったことがなく、少し手こずったので備忘録も兼ねて共有させていただきます。

目次

1. landscapeの基本
2. なぜPCにも影響するのか
3. iPhone Pro Max対応のlandscape設定
4. 実例で見る
5. まとめ

1. landscapeの基本

landscapeの基本的な設定は以下のようになります。

@media (orientation: landscape) {
  /* ここに横向きのデバイスに適用するスタイルを書く */
}

2. なぜPCにも影響するのか

landscapeは、デバイスの表示エリアの幅が高さよりも大きい場合に適用されるオリエンテーションです。多くのPCディスプレイもこの定義に当てはまるため、PCにも影響が及びます。

3. iPhone Pro Max対応のlandscape設定

iPhone Pro Maxの幅が428ピクセルであるため、その対応を考慮して max-height を 450px に設定します。

@media (orientation: landscape) and (max-height: 450px) {
  /* ここに横向きのデバイスに適用するスタイルを書く */
}

4. 実例で見る

以下は、この方法を使用してスマートフォンの横向き表示にだけ適応されるサンプルです。

@media (orientation: landscape) and (max-height: 450px) {
  body {
    background-color: #f0f0f0;
  }

  .landscape-text {
    font-size: 20px;
  }
}

5. まとめ

スマートフォンの横画面での対応が必要な場合に、max-height: 450px の設定を忘れずに行うことで、PCの画面に影響を与えずにlandscapeを使うことができます。この方法で、横画面での対応を効果的に実装してみてください！