ユーザーのデバイス環境をjavascriptで取得する方法

デバイス毎に柔軟な対応を!

連日の猛暑続き、仕方ないとはいえイヤになりますね!
クーラーの効いた室内で働けることに感謝仕切りのDAIMAです。

さて今回は、デバイスやブラウザなど、
ユーザーの閲覧環境をjavascriptで取得し、
判別して別々の処理を行う方法をご紹介します。

コード解説


$(function(){

  var ua = window.navigator.userAgent.toLowerCase();

  if (ua.indexOf('ipad') != -1) {
  alert('iPadで見ているなッ!');
  }else if(ua.indexOf('iphone') != -1){
  alert('iPhoneで見ているなッ!');
  }else if(ua.indexOf('Android') != -1){
  alert('Androidで見ているなッ!');
  }else{
  alert('iPhone・iPad・Android以外で見ているなッ!');
  };
  });

上記のスクリプトを実行すると、
アクセスしたユーザーのデバイスに応じて、
DIOっぽいアラートを返してくれます。

原理は単純で、まずnavigatorオブジェクトから
userAgent(ユーザーエージェント)情報を取得し、変数「ua」に代入。

その変数を対象に、
indexOfメソッドで「ipad」、「iPhone」など特定の
キーワードが含まれているかを調べることで、
デバイスの判別に活用しています。

アラート部分を書きかえれば、デバイスに合わせた個別の処理が可能です。
また、上記の例以外でも、indexOf()の引数の中身を変えることで
様々な条件での判別に応用可能です。例えば…

indexOf(‘firefox’) → ブラウザがfirefoxのケース
indexOf(’blackberry’) → デバイスがblackberryのケース
indexOf(‘msie 9.’) → ブラウザがIE9のケース

などなど、実に細かく判別することが可能です。

私は今回、この処理をタブレット環境への対応のために利用しました。
近年は特に多様なデバイスへの対応が求められてますので
ここはしっかり押さえておきたいところですね!

Wordpressサイトの
ご相談・ご依頼
承ります
ご相談は無料!詳しくはこちら >