PHP or JavaScriptでMobile端末(iPad, iPhone, Android)かどうかを判別

投稿日：

pc_or_mobilePCとiPad両方に対応したWeb Siteを構築したときのMemo.

共通のCSSのみで完結させたかったけど、どうしても下記理由でPCとMobileを判別する必要が出てきた。

  • どの端末でも動画を再生させたい
  • どの端末でも曲(BGM)を流したい
  • Gallery（画像一覧）はSwipeで次の写真に移動したい
    → jQuery系Plugin側で対応しているのが多い。
  • PCで画面を広くした場合だけ、位置を変えたい

実現するために調査した結果の一覧。

Library 言語&License 用途
swfobject JavaScript
(MIT)		 Flash(swf)が使えるか判別して、object tagか静的画像を自動挿入してくれる。
Modernizr JavaScript
(MIT & BSD)		 HTML5/CSS3が使えるか判別。<video>が使えるかの判断に
jQuery.Mobile JavaScript
(MIT or GPLv2)		 TapやSwipeなどのEventを取得するのに使える。その場合autoInitializePage=falseにして利用する。
VideoJS JavaScript
(LGPLv3)		 video tag → flash → 静的画像の順に判断して、動画を再生できるようにしてくれる。Flashの場合はFlowPlayerを利用。こちらの記事も参考に
php-mobile-detext PHP
(MIT)		 Server側で判断したいときに。PHP4で動かないけど、簡単に修正できる。
(WordPress) PHP WordPressを使っているなら標準でiPhoneかを判断するGlobal変数（$is_iphone）がある。
詳しくは/wp-includes/vars.phpを参照。

ちなみにiPhone, iOS, Androidが判断できればいいという場合は次のようなJavaScriptで簡単に判断することが出来る（jQueryを拡張）。

jQuery.extend({
    isMobile: function() {
        if (navigator.userAgent.indexOf('iPhone') > 0 ||
            navigator.userAgent.indexOf('iPad') > 0 ||
            navigator.userAgent.indexOf('iPod') > 0 ||
            navigator.userAgent.indexOf('Android') > 0) {
            return true;
        }
        return false;
    }
});

jQuery(function($) {
    if ($.isMobile()) {
        alert('this is mobile');
    }
});

HTML5のVideo TagはBrowserごとに動作が違うので

PC → Flash or 静的画像
Mobile(iOS or Android) → Video Tag or 静的画像

と判断した方がよさそう。

 

< 2012/05/18 Modified >
WordPressのGlobal変数$is_iphoneを見つけたので追記

 

< Related Posts >