【CSS】スマホやiPadなどデバイスの縦と横を判別する方法

スマホやiPadの縦と横でレイアウト変えたいんだけどどうすればいいの？

ブレイクポイントではなく、縦長か横長かを判別してレイアウトを変えたい場合があります。

それはCSSだけで対応出来るので、今回はその方法をご紹介していきます。

効率よくコーディングしたい人はこちら

スマホやiPadなどデバイスの縦と横を判別する方法

早速ですがコードを見てみます。

/* 縦向き */
@media (orientation: portrait) {
  縦向きでしたい処理
}

/* 横向き */
@media (orientation: landscape) {
  横向きでしたい処理
}

これだけです。

例えば縦向きではフォントの色を青、横向きでは赤にしてみます。

こちらがデモになります。

See the Pen
デバイスの縦と横を判別 by junpei (@junpei-sugiyama)
on CodePen.

スマホやiPadから右上の「EDIT ON CodePen」をタップして縦長と横長で確認するとフォントが変わります。

ただしコードが表示されていると上手く反映されないので、もしコードが表示されていたら上のタブをタップして非表示にして下さい。

また、iPadでは以下のレイアウトのアイコンをタップして切り替えると縦横を切り替えられます。

ブレイクポイントの条件を追加

条件にはブレイクポイントも追加出来ます。

/* 横向き */
@media (orientation: landscape) and (max-width: 767px) {
  横向きかつ767px以下でしたい処理
}

以上になります。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック