【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプト

2018/09/03 2018/10/03

サイトへのアクセス時に「スマートフォン(iPhine/Android)」と「PC」で処理を切り替えたいとの質問を受けたので、久々にjQueryでスクリプトを作ってみました。

以前作成した「ハンバーガーメニュー」をスマートフォンだけに適応したい場合などに使えそうです。

jQueryでユーザーエージェント（ユーザーの端末情報）を判定する方法

判定用のスクリプトは以下のようになります。

indexOf()メソッドは指定したキーワードの発見位置を返します。
発見できなければ -1 の数値を返すので、値が 0 より大きければキーワードを発見できたという事になります。

if文を日本語に直すと、

●「iPhone」or「iPod」or「Android」と、「Mobile」という文字列が入っている
⇒ スマホ

●「Mobile」が入ってなく、「iPad」or「Android」という文字列が入っている
⇒ タブレット

●それらの文字列が入っていない
⇒ PC

という感じとなります。

created by Rinker

以前に作成したハンバーガーメニューを「PCでは使いたくない」（→スマホのみ反映したい）という場合は以下のようにすればいけるかと。

↑ 表示を隠すためのクラス。

↑ スマホ用、PC用メニュー全てに hideクラスを書いているのがミソ。

↑ スマホ, タブレット, PCそれぞれの処理内で hideクラスをつけたり消したりしているだけです。