jQuery

Javascript,jQuery

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

2018/09/07

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

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

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

デモはこちら

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

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

スクリプト解説

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

if文を日本語に直すと、

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

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

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

という感じとなります。

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

こちらのポストで作成しているハンバーガーメニューを「PC」では使いたくないという場合、以下のようにすればいけるかと。

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

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

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

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

デモはこちら

星系出雲の兵站 1 (ハヤカワ文庫JA)

星系出雲の兵站 1 (ハヤカワ文庫JA)

林 譲治

価格 : 907円

     

-Javascript,jQuery