【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプト
2018/10/03
サイトへのアクセス時に「スマートフォン(iPhine/Android)」と「PC」で処理を切り替えたいとの質問を受けたので、久々にjQueryでスクリプトを作ってみました。
以前作成した「ハンバーガーメニュー」をスマートフォンだけに適応したい場合などに使えそうです。
jQueryでユーザーエージェント（ユーザーの端末情報）を判定する方法
ユーザーエージェント判定スクリプト
判定用のスクリプトは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 |
$(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用処理 } }) |
デモはこちら
【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプトデモ
https://lightning-bolt.xyz/js/jquery.tgSmartphonePcDecision/
https://lightning-bolt.xyz/js/jquery.tgSmartphonePcDecision/
スクリプト解説
indexOf()メソッドは指定したキーワードの発見位置を返します。
発見できなければ -1 の数値を返すので、値が 0 より大きければキーワードを発見できたという事になります。
if文を日本語に直すと、
●「iPhone」or「iPod」or「Android」と、「Mobile」という文字列が入っている
⇒ スマホ
●「Mobile」が入ってなく、「iPad」or「Android」という文字列が入っている
⇒ タブレット
●それらの文字列が入っていない
⇒ PC
という感じとなります。
ハンバーガーメニューに当てはめてみる
以前に作成したハンバーガーメニューを「PCでは使いたくない」（→スマホのみ反映したい）という場合は以下のようにすればいけるかと。
|
1 2 3 |
.hide { display: none; } |
↑ 表示を隠すためのクラス。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- （スマホ用）ハンバーガーメニュー --> <div class="navToggle hide"> <span></span><span></span><span></span><span>menu</span> </div> <nav class="globalMenuSp hide"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> </ul> </nav> <!-- PC用メニュー --> <nav class="globalMenuPc hide"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> </ul> </nav> |
↑ スマホ用、PC用メニュー全てに hideクラスを書いているのがミソ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(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'); } }) |
↑ スマホ, タブレット, PCそれぞれの処理内で hideクラス をつけたり消したりしているだけです。
デモはこちら
【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプトデモ
https://lightning-bolt.xyz/js/jquery.tgSmartphonePcDecision/
https://lightning-bolt.xyz/js/jquery.tgSmartphonePcDecision/