【jQuery】PCとスマホの判定方法【コピペでOK】

こんにちは。

 

今回はjQueryを使用した際の「PCとスマホの判定方法」を解説したいと思います。

 

「PCだったらこの処理」「スマホだったらこの処理」という具合にjQueryで判定を入れたい場面もあるかと思います。

 

そんな時は以下の解決方法をお試しください。

解決策:【jQuery】PCとスマホの判定方法

以下のコードをコピペすればOKです。

 

$(function() {
    //ユーザーの端末で条件分岐
    $(window).scroll(function () {
      var ua = navigator.userAgent;
      if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 
    && ua.indexOf('Mobile') > 0) {
            // スマホ用の処理
      } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
            // タブレット用の処理
      } else {
            // PC用の処理
      }
   });
});

※Wordpressをお使いの方は「$」を全て「jQuery」に書き変えてお使いください。

PCとスマホでスクロール量はどれだけ違うのか

例えば今回僕がユーザーエージェント判定を入れた理由は、jQueryのscrollTop()を使った際の「PCとスマホでスクロール量が違うためjQueryの処理が走る位置がおかしい」という問題を解決するためでした。

 

実際にどのくらいスクロール量に違いが出るのか?

 

百聞は一見にしかず。

 

以下の画像を見比べてください。

 

PCのスクロール量

 

スマホのスクロール量

 

左上の数字がページ最上部からRanking項目までのスクロール量なのですが、PCだと「863」に対し、スマホ版は「424」となっております。

 

これだけ数字に開きが出ると、jQueryの処理が走る位置もバラバラになっちゃいますね。

解説

念のため解説をしておきます。

 

スマホ用の判定

if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 
    && ua.indexOf('Mobile') > 0) {
            // スマホ用の判定
      }

 

この条件式は「ユーザーがiPhone,iPod,Androidスマホのどれかに該当する場合」の処理を記述します。

 

タブレット用の判定

 

else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
            // タブレット用の判定
      }

この部分には「ユーザーがiPad,Androidタブレットのどちらかに該当する場合」の処理を記述します。

PC用の判定

 

else {
            // PC用の判定
      }

最後にこの中に「どれにも該当しない場合=PC」の処理を記述しましょう。

 

まとめ:【jQuery】PCとスマホの判定方法

レスポンシブ対応が大前提とされている昨今、PCとスマホ両方で同じ動きを取り入れたいと思われてる方も多いと思います。

 

今回のソースコードはストックとして持っていると大変便利なのでおすすめです。

 

以上、「【jQuery】PCとスマホの判定方法【コピペでOK】」でした!