PCからなのか、モバイルデバイスからのアクセスなのかを "ざっくり" と判別する。

タイトルのとおりなのだけれど、とりあえず今やりたいのは、

アクセスしてきたブラウザが、ユーザの側でウィンドウサイズ変更可（≒PC）な奴なのか、そうでない（≒スマートフォンやタブレットの類）なのか。

…ということを知りたいわけです。

というのも、いわゆるレスポンシブなデザインのページを作るときに、

  • CSSのメディアクエリを利用して、ウィンドウサイズに合わせたスタイルを適用する。

…という手法を採ることが多いと思うのだけれども、これ、PCのブラウザからの閲覧時にブラウザウィンドウのサイズ変更を行うと、当然ながら、ブラウザの幅に応じて適用されるスタイルが切り替わるわけです。

そういう造りのサイトも多いのですが、これが、個人的に非常に気持ちが悪い。

なので、

  • デスクトップブラウザからのアクセス時 … PC用のスタイル適用。メディアクエリなど使用せず、ウィンドウサイズに追随したデザイン変化なし。
  • モバイルブラウザからのアクセス時 … メディアクエリを利用して、デバイスの幅に対して適切なスタイルを適用。

そんな感じの動作が良いなぁ、と思いつつ、ざっくりと PC/Mobile の切り分けをするために、ブラウザのユーザエージェント(UA)文字列を調べてみる。

タブレットやスマホ上で動いているブラウザのUA情報を見ると、こんな感じ。

  • Chrome … iOSやAndroidスマホの Chrome では "Mobile" の文字列が入る。新しめのAndroidタブレットに載っているChromeは無印。但しデバイス名は含まれる。
  • Safari … iOS 上の Safari の UA には "Mobile" という文字列が含まれる。
  • Firefox … スマホ上の Firefox には "Mobile " 、タブレット上の奴には "Tablet" という文字列が含まれる。
  • Internet Explorer … Windows Phone の IE には "IEMobile" という文字列が入る。タブレット版は無印。
  • Opera … "Mobi" という文字列が入っていればモバイル版であろう。
  • Androidブラウザ … ほぼ Chrome に準ずる。
  • Kindleブラウザ … ブラウザ名 "Silk" が含まれる。

主だったところはこれくらい押さえておけば良かろう。で、結論。

今回は割とざっくりした感じで判別できれば良いので、結局、

  • Mobi
  • Tablet

これらの文字列のいずれかが含まれていれば「PC以外」からのアクセスである、と判断すれば充分。

PHPだったら、

function isMobile(){
  $ua = $_SERVER[ 'HTTP_USER_AGENT' ];
  if( stripos( $ua , 'mobi' )!== false || stripos( $ua , 'tablet') !== false ) return true ;
  return false;
}

こんな関数を作っておけば事足りそうですな。

JavaScript でも簡単に同じことを出来ますね。

これだと、Android Tablet + Chrome や Kindle や Windows Tablet + IE からのアクセスは「PCから」と判断されてしまうけれど、それは先方さんの「うちのタブレットは高解像度なのでPCサイトを表示してくださいよ」という意思に沿った表示をするだけなので、まぁ良かろう。

viewport を適切に設定しておけばピンチアウトで拡大表示が可能なので、その辺りはユーザ側にお任せできる状況にしておけば、ユーザビリティ上、大きな問題にはならないでしょう。

また、同じAndroidタブレット上の Chrome と Firefox でページレイアウトが異なる、という可能性もあるけれど、今回はそれも無視しておきましょ。

もっと厳密にデバイス判定を行いたいならば、PHPのクラスライブラリ・Mobile_Detect.php を使う、という手もあります。

→ Mobile Detect - http://mobiledetect.net/

とりあえず今のところは、うちでは Mobile_Detect を使う必要はないのです。

カテゴリ:

タグ: