【CSS】デバイスが縦長か横長か判定メディアクエリ

CSSでデバイスが縦長か横長かをメディアクエリで判定します。

Contents

CSSでデバイスが縦長か横長かをメディアクエリで判定

スマホやタブレットを縦方向にみる場合などに使用します。

@media screen and (orientation: portrait) {
// ここに処理を書く
}

通常のパソコン画面や、タブレットやスマホを横方向にみる場合の指定

@media screen and (orientation: landscape) {
// ここに処理を書く
}

@media screen and (orientation: portrait) and (max-width: 400px) {
    // ここに処理を書く
}

@media screen and (orientation: landscape) and (min-width: 400px) {
    // ここに処理を書く
}

以上です!