【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプト
2018/10/03
サイトへのアクセス時に「スマートフォン(iPhine/Android)」と「PC」で処理を切り替えたいとの質問を受けたので、久々にjQueryでスクリプトを作ってみました。
以前作成した「ハンバーガーメニュー」をスマートフォンだけに適応したい場合などに使えそうです。
jQueryでユーザーエージェント（ユーザーの端末情報）を判定する方法
ユーザーエージェント判定スクリプト
判定用のスクリプトは以下のようになります。
[js]
$(function () {
var ua = navigator.userAgent;
if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
// スマートフォン用処理
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
// タブレット用処理
} else {
// PC用処理
}
})
[/js]
デモはこちら
https://lightning-bolt.xyz/js/jquery.tgSmartphonePcDecision/
スクリプト解説
indexOf()メソッドは指定したキーワードの発見位置を返します。
発見できなければ -1 の数値を返すので、値が 0 より大きければキーワードを発見できたという事になります。
if文を日本語に直すと、
●「iPhone」or「iPod」or「Android」と、「Mobile」という文字列が入っている
⇒ スマホ
●「Mobile」が入ってなく、「iPad」or「Android」という文字列が入っている
⇒ タブレット
●それらの文字列が入っていない
⇒ PC
という感じとなります。
ハンバーガーメニューに当てはめてみる
以前に作成したハンバーガーメニューを「PCでは使いたくない」（→スマホのみ反映したい）という場合は以下のようにすればいけるかと。
[css]
.hide {
display: none;
}
[/css]
↑ 表示を隠すためのクラス。
[html]
[/html]
↑ スマホ用、PC用メニュー全てに hideクラスを書いているのがミソ。
[js]
$(function () {
var ua = navigator.userAgent;
if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
// スマートフォン用処理
$('.navToggle').removeClass('hide');
$('.globalMenuSp').removeClass('hide');
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
// タブレット用処理
$('.navToggle').removeClass('hide');
$('.globalMenuSp').removeClass('hide');
} else {
// PC用処理
$('.globalMenuPc').removeClass('hide');
}
})
[/js]
↑ スマホ, タブレット, PCそれぞれの処理内で hideクラス をつけたり消したりしているだけです。
デモはこちら
https://lightning-bolt.xyz/js/jquery.tgSmartphonePcDecision/