デバイスの向きを検知するためのメディアクエリ

Posted on by

デバイスの向きに合わせてCSSを適用したい場合、以下の手順で行うことができます。

デバイスが横向きの場合

デバイスが横向きの時に特定のCSSを適用したい場合、メディアクエリの orientation を使用します。landscape という値を指定することで、横向きの状態を示します。

@media (orientation: landscape) {
    /* デバイスが横向きの場合のCSS記述 */
}

デバイスが縦向きの場合

逆に、デバイスが縦向きの時にCSSを適用させたい場合は、portrait を指定します。

@media (orientation: portrait) {
    /* デバイスが縦向きの場合のCSS記述 */
}

背景色を向きに合わせて変更する例

具体例として、デバイスの向きによって背景色を変更する場合を考えます。

/* デバイスが縦向きの場合 */
@media (orientation: portrait) {
    background-color: #fcee21;
}

/* デバイスが横向きの場合 */
@media (orientation: landscape) {
    background-color: #ffa8c8;
}

画面の横幅を条件に追加する

さらに、メディアクエリは画面の横幅を基準に条件を付加することも可能です。
例えば、横向きで画面の横幅が 767px 以下の場合の記述は次のようになります。

@media (orientation: landscape) and (max-width: 767px) {
    /* デバイス横向きで、画面の横幅が 767px 以下の場合のCSS記述 */
}

画面の向きを判別する

注意すべきは、orientation は画面の長い方（縦または横）を判別し、その向きを示すものです。
画面そのものの向きを判別するものではありません。

まとめ

メディアクエリを使用すれば、画面のサイズだけでなく、画面の向きに合わせてCSSを調整することが可能です。
これにより、異なる向きに最適化されたレイアウトを実現できます。
メディアクエリは重要なツールであり、様々なデバイスに適切に対応するために活用する価値があります。