JavaScriptでスマホかどうか判別する3つのテクニック

JavaScriptでモバイル端末(スマホやタブレット)を調べたい場合、色々な方法があります。

ここではその中でも使いやすそうな3つのテクニックをまとめました。

スマホ判別の3つのテクニック

そのテクニックは次の通り

  • userAgentの値から判断する
  • CSSのメディアクエリを使う
  • 専用のライブラリを使う

この3つについて具体的なやり方を説明していきます。

userAgentの値を見る

まず初めはブラウザのユーザーエージェントから判別する方法

コードからは window.navigator.userAgent  で調べることが可能です。

そしてこの値に例えば次のモバイル端末と思われる

  • Android
  • iPhone
  • iPad
  • BlackBerry
  • IEMobile

などの値が含まれていればモバイルだと判別できるわけです。

 

具体的なコード例は次の通り

初めにモバイルとマッチする正規表現 regexp  を用意

そのあとはsearchメソッドを使って userAgent  にそれが含まれるか判定しているだけ

 

次のように関数化するとさらに便利だと思います。

 

以上がユーザーエージェントを使ったモバイルかどうかの判定法

単純にモバイルかどうかを判別するだけならこの方法が一番簡単ですね。

CSSのメディアクエリを使って判別

お次はCSSのメディアクエリと組み合わせて判別する方法

メディアクエリの書き方については次の記事で書いた通りです。

画面幅に合わせてCSSを切り替えられるのでこの性質を利用します。

そのやり方は次の通り

 

まず次のようにダミーの要素を作成

 

そしてこの要素に対して次のCSSを適用

これは最大幅が760px未満の時に要素を非表示にするCSSです。

なのでこれを利用すれば「幅の狭い端末 = モバイル端末」だと判別できます。

 

そしてJS側で非表示かどうかを調べてモバイルかどうかを判別します。

例えば次はこれを利用した判別関数 isMobile  のコード例

単純にdisplayプロパティの値が 'none'  かどうか調べてるだけです。

 

以上がCSSのメディアクエリを使った判別法

こちらは画面幅でスマホかどうか判断したい場合に便利かもしれません。

専用のライブラリで判別

実はモバイルかどうかを判別できるライブラリも存在します。

それが mobile-detect.js というライブラリで次のページからダウンロードが可能

使い方についても上のページで分かりやすく書いてあります。

 

一応使い方を説明しておくと、まずヘッダーなどでライブラリを読み込み

 

そしてMobileDetectオブジェクトを作成してmobileメソッドを呼び出すだけ

MobileDetect.mobileメソッドはモバイルなら機種名、それ以外なら null  を返してきます。

ちなみにタブレット名やOS名などさらに詳しい情報を調べるメソッドもある模様

単純にモバイルかどうかを判別する以外の使い方もできそうです。

ここまでのまとめ

ということでモバイルの判別法まとめ

  • userAgentの値で判別
    モバイル用の正規表現を用意して userAgent  にマッチするか調べる
  • CSSメディアクエリで判別
    ダミーの要素を用意し、画面幅で非表示にするメディアクエリを書く
    あとはJS側で要素が非表示かどうか調べればモバイルかどうか判別可能
  • 専用のライブラリで判別
    mobile-detect.jsをダウンロードしてMobileDetect.mobileメソッドを利用

個人的には正規表現を使うのが一番簡単で楽だと思います。

以上JavaScriptでモバイル端末かどうか判別する方法についてでした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください