Javascript(jQuery)でCSSと組み合わせて簡単にスマホ判定

サイトを作っていると javascript（jQuery） の処理でスマホ判定をしたいことがよくあります。そのときにウィンドウ幅で判断したり、「navigator.userAgent」を利用して判定したりしていました。

最近それらとは違う方法でスマホ判定をするようにしているので、そちらをご紹介します。
※新しい判定方法に変更した理由は何も見ずに書くことができるという単純な理由です

スポンサーリンク

最初に

まず、CSSでMedia Queri「@media screen and (max-width: 768px) 」を利用してPC、スマホで表示・非表示を制御していることが前提となります。

例えば下記のように「menu-toggle」クラスをハンバーガーメニュー（≡ ←このようなメニュー）に持たせて、PCでは表示なし、スマホでは表示ありとしています。
※ウィンドウ幅768pxを境に切り替わります
※スマホ時＝ウィンドウ幅が小さい場合です（それをスマホと判断しています）

html

<span class="menu-toggle">≡</span>

css

.menu-toggle {
    display: none;
}

@media screen and (max-width: 768px) {
    /* スマホ時 */
    .menu-toggle {
        display: inline-block;
    }
}

判定方法

クラス「menu-toggle」の「display」の値からスマホかどうか判定します。
「display」の値が『none』以外であればスマホ（768以下）、『none』であればPCです。

ある要素のcssの状態のみ判定すればいいので、細かいところに気を遣う必要がなく使いやすいです。

js

function is_sp() {
    return ($('.gmenu-toggle').css('display') !== 'none');
}

メリット

この方法であれば、スマホかどうかの判定結果はcssの@mediaに依存します。

よって、スマホ時（768px以下）のスタイル（CSS）と、スマホ時の動作（javascript / jQuery）が完全に合致します。つまり、スマホ時の見た目と動作が同じ条件で適応されます。

他の判定の場合ですと、CSSは768px以下で適応されるが、javascriptの処理はiPhone・Android端末の場合しか適応されないということが起こり得ます（navigator.userAgentで判定した場合など）。問題がない場合も多いとは思います。

ただし、スタイルと動作の適応条件を合わせたい場合であれば、この判定方法は適しているのかなと思います。

スポンサーリンク