CSSでデバイスの縦長横長を判別 @media(orientation)

デバイスの表示領域が縦長か横長かで CSS を変更したいと思ったことはありませんか?



CSS メディア特性 orientation

メディアクエリのメディア特性に orientation というものがあることを知りませんでした(涙)。

これまでは javascript で

    if (window.innerHeight > window.innerWidth) {
        document.body.classList.remove('landscape');
        document.body.classList.add('portrait');
    } else {
        document.body.classList.remove('portrait');
        document.body.classList.add('landscape');
    }

などと、body タグにクラスを付加して切り分けていましたが、この orientation を使えばメディアクエリで振り分けられます。


orientation - CSS: カスケーディングスタイルシート | MDN


構文

orientation 特性は以下の一覧のうち一つのキーワード値で指定します。

キーワード値

portrait
ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。
landscape
ビューポートは横長です。つまり、幅が高さよりも大きい状態です。


注意すべきは端末の向きではなく、あくまでもビューポートの幅と高さの比較だということです。


具体例

www.movieimpressions.com

このサイトのトップページで使っています。


f:id:ausnichts:20191227203141j:plain


.listingNavi {
    display: flex;
    flex-direction: column;
}
@media (orientation: landscape){
    .listingNavi {
        flex-direction: row;
    }
}


クラス名の listingNavi は3つの画像の親要素に設定されているクラスです。

たとえば、@media (min-width: 768px) {} ですと、スマホを横向きにしても画像が縦並びのままになりますが、@media (orientation: landscape){} を使いますと横並びに変わります。


これは便利です!