CSSでスマホの向きを判定できるorientationを使おう！

2019年12月20日

今回は、スマホの縦横（portrait / landscape）を簡単に判別できるように実装しました。
表示がイマイチになりがちなスマホの横表示。
対応するのが面倒で横表示を非対応にしたい場合もあると思います。
その際に本ページのコードが使えると思います！

さっそく使ってみよう

それではさっそく、使ってみましょう！

// 縦向き（横幅 ＜ 高さ）
@media screen and (orientation: portrait) {
    // 縦向きのスタイル
}

// 横向き（横幅 ＞ 高さ）
@media screen and (orientation: landscape) {
    // 縦向きのスタイル
}

めちゃめちゃカンタンですねｗｗ

使い方としては、ブレイクポイントなどで使うメディアクエリと同じような記述になります。

仕様も単純です。
ウィンドウの高さと横幅を見て、

横幅＜高さならば「orientation: portrait」
横幅＞高さならば「orientation: landscape」
をしているだけです。

つまり、これでスマホの向きを判定できるって訳ですね！

・・・。

それじゃあ足りなくね？
って思った方は鋭い！素晴らしい！

そう、この指定は横長か縦長かを判定するだけのものです。
つまり、PCでもこの判定が実行されます。

皆さんが作っているサイトでスマホのみの対応が必要だったらJavascriptを使う必要があります。

Javascriptで足りない部分を補う

みんな大好きJavascriptのお時間です。

// スマホを判定する処理
function isMobile() {
    const ua = navigator.userAgent;
    return ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0
}

// スマホのときにbodyタグにクラスをつける
if (isMobile()) {
    document.body.classList.add('is-mobile');
}

このisMobile関数を使えば、スマホのときは「true」、PCの場合は「false」を返してくれます。

さらに、下のIF文でスマホのときだけbodyタグに「is-mobile」というクラスを付けています。

そうすることで、スマホ専用のスタイルを当てることが可能になります。

他のメディアクエリと組合わせる

さて、ここまでの解説で以下の２つが判定可能になりました。

デバイスの縦横の判定
スマホか否かの判定

これらを使えば、スマホの向きを判定することができると思います。

というわけで、はいドンｯｯ！！


@media screen and (orientation: portrait) {
    .is-mobile .text::before {
        content: "スマホの縦";
    }
}

@media screen and (orientation: landscape) {
    .is-mobile .text::before {
        content: "スマホの横";
    }
}

// スマホを判定する処理
function isMobile() {
    const ua = navigator.userAgent;
    return ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0
}

// スマホのときにbodyタグにクラスをつける
if (isMobile()) {
    document.body.classList.add('is-mobile');
}

挙動はデモページで確認できるようにしました！

これをPCで見た場合、スマホで見た場合、デバイスの縦横を変えた場合など、いろいろ触ってみてください！！