jQuery

Javascript,jQuery

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

2018/10/03

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

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

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

ユーザーエージェント判定スクリプト

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

デモはこちら

スクリプト解説

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

if文を日本語に直すと、

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

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

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

という感じとなります。

ハンバーガーメニューに当てはめてみる

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

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

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

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

デモはこちら

関連するポスト

【JS】ハンバーガーメニューをjQueryとCSSで作成する方法

-Javascript,jQuery
-, , , , ,