JavaScriptでモバイル端末（スマホやタブレット）を調べたい場合、色々な方法があります。
ここではその中でも使いやすそうな３つのテクニックをまとめました。
スマホ判別の３つのテクニック
そのテクニックは次の通り
- userAgentの値から判断する
- CSSのメディアクエリを使う
- 専用のライブラリを使う
この３つについて具体的なやり方を説明していきます。
userAgentの値を見る
まず初めはブラウザのユーザーエージェントから判別する方法
コードからは window.navigator.userAgent で調べることが可能です。
そしてこの値に例えば次のモバイル端末と思われる
- Android
- iPhone
- iPad
- BlackBerry
- IEMobile
などの値が含まれていればモバイルだと判別できるわけです。
具体的なコード例は次の通り
|
1 2 3 4 5 6 |
var regexp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; if(window.navigator.userAgent.search(regexp) !== -1){ console.log('モバイル端末です'); }else{ console.log('モバイル端末ではないです'); } |
初めにモバイルとマッチする正規表現 regexp を用意
そのあとはsearchメソッドを使って userAgent にそれが含まれるか判定しているだけ
次のように関数化するとさらに便利だと思います。
|
1 2 3 4 5 |
/** モバイル端末なら true 、それ以外なら false を返す */ function isMobile(){ var regexp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; return (window.navigator.userAgent.search(regexp) !== -1); } |
以上がユーザーエージェントを使ったモバイルかどうかの判定法
単純にモバイルかどうかを判別するだけならこの方法が一番簡単ですね。
CSSのメディアクエリを使って判別
お次はCSSのメディアクエリと組み合わせて判別する方法
メディアクエリの書き方については次の記事で書いた通りです。
画面幅に合わせてCSSを切り替えられるのでこの性質を利用します。
そのやり方は次の通り
まず次のようにダミーの要素を作成
|
1 |
<div id="dummy_elem"></div> |
そしてこの要素に対して次のCSSを適用
|
1 2 3 |
@media only screen and (max-width: 760px) { #dummy_elem { display: none; } } |
これは最大幅が760px未満の時に要素を非表示にするCSSです。
なのでこれを利用すれば「幅の狭い端末 ＝ モバイル端末」だと判別できます。
そしてJS側で非表示かどうかを調べてモバイルかどうかを判別します。
例えば次はこれを利用した判別関数 isMobile のコード例
|
1 2 3 |
function isMobile(){ return $('#dummy_elem').css('display')=='none'; } |
単純にdisplayプロパティの値が 'none' かどうか調べてるだけです。
以上がCSSのメディアクエリを使った判別法
こちらは画面幅でスマホかどうか判断したい場合に便利かもしれません。
専用のライブラリで判別
実はモバイルかどうかを判別できるライブラリも存在します。
それが mobile-detect.js というライブラリで次のページからダウンロードが可能
使い方についても上のページで分かりやすく書いてあります。
一応使い方を説明しておくと、まずヘッダーなどでライブラリを読み込み
|
1 |
<script src="mobile-detect.js"></script> |
そしてMobileDetectオブジェクトを作成してmobileメソッドを呼び出すだけ
|
1 2 3 4 5 6 |
var md = new MobileDetect(window.navigator.userAgent); if(md.mobile()){ console.log('モバイル端末'); }else{ console.log('NOT モバイル端末'); } |
MobileDetect.mobileメソッドはモバイルなら機種名、それ以外なら null を返してきます。
ちなみにタブレット名やOS名などさらに詳しい情報を調べるメソッドもある模様
単純にモバイルかどうかを判別する以外の使い方もできそうです。
ここまでのまとめ
ということでモバイルの判別法まとめ
- userAgentの値で判別
モバイル用の正規表現を用意して userAgent にマッチするか調べる
- CSSメディアクエリで判別
ダミーの要素を用意し、画面幅で非表示にするメディアクエリを書く
あとはJS側で要素が非表示かどうか調べればモバイルかどうか判別可能 - 専用のライブラリで判別
mobile-detect.jsをダウンロードしてMobileDetect.mobileメソッドを利用
個人的には正規表現を使うのが一番簡単で楽だと思います。
以上JavaScriptでモバイル端末かどうか判別する方法についてでした。
