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

目次

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

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

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

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

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

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

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

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

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