jQueryでスマホやタブレットのユーザーエージェントをざっくり判別する方法

jQueryでスマホやタブレットのユーザーエージェントをざっくり判別する方法

判別するjQuery

js

var getDevice = (function(){
var ua = navigator.userAgent;

if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
    return 'sp';
}else if((ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) && screen.width <= 768){
    return 'tab';
}else{
    return 'other';
}
})();

indexOf()で端末のユーザーエージェントの中に対象の文字が含まれているか検証しています。

6行目の&& screen.width <= 768でデバイスの幅でも制限つけています。
実機持ってないんでクロームでしか確認してないですが、iPad Proだとデバイスの幅が1024あるのに、タブレットサイトが表示されてしまうのでもうこれはPCだなってことで除外しています。
実機持ってないですけど。

返り値で処理を分ける

js

if (getDevice == "other") {
    //otherの時の処理
}

こんな具合でif文で条件つけていけばPCのみhover処理させてスマホなくして軽くするとかできます。
ざっくりなんでAndroidのこの端末はこれ。その端末はこれみたいなことはできませんが大体はこれで済むと思います。