JavaScriptでUA判別してスマホとタブレットを振り分ける方法


JavaScriptを使用してUAでiPhoneやAndroidのスマホを判定したり、増加傾向にあるタブレットを判別する方法メモ。
UAの法則性を覚えておけば、ある程度アクセスを判別して振り分けられるので重宝します。
今回はJavascriptに絞っていろいろな判別をしてみたいと思います。

SPONSORED LINK

JavascriptでUA判別してリダイレクト

<script type="text/javascript">
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
        location.href = './sp/';
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        location.href = './tab/';
    }
</script>

まずはuaにアクセス端末のユーザーエージェントを格納します。
そして条件分岐で文字列に「iPhoneが含まれる場合」「iPodが含まれる場合」「AndroidとMobileが同時に含まれる場合」「Windows Phoneが含まれる場合」は/sp/というURLにリダイレクトします。
それ以外で文字列に「iPadが含まれる場合」「Androidのみ含まれる場合」は/tab/というURLにリダイレクトします。
これに当てはまらないUAだった場合にはリダイレクトは行われません。

という記述です。

Androidに限ってはMobileという文字列が含まれるものがスマホになっているので、単純にAndroidだけで判別しているとスマホとタブレットで当てはまってしまうので注意が必要ですね。
Apple製品ではiPhoneとiPodとiPadという明確な振り分けができます。

JavascriptでCSSを振り分ける

<script type="text/javascript">
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
        document.write('<link rel="stylesheet" type="text/css" href="./css/mobile.css">');
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        document.write('<link rel="stylesheet" type="text/css" href="./css/tab.css">');
    }else{
        document.write('<link rel="stylesheet" type="text/css" href="./css/pc.css">');
    }
</script>

前項同様の処理でCSSを呼び出す記述を振り分けている記述です。
用意するのは「mobile.css」「tab.css」「pc.css」になっていますがこの辺はお好みで変更できますね。

注意したいのはいつの時代にも生み出される例外端末です。
AndroidでもUAの法則性がおかしな端末やWindows Phoneの世代によって様々な問題があるようです。

そこまで厳格に振り分ける必要がある人はいないと思いますが、
もしも必要ならばJavascriptではなくPHPを利用した
Mobile Detect – lightweight PHP class for detecting mobile devices (including tablets)
などを使うことをおすすめします。

ちなみにどうしてもJavascriptで実現させたい時には
hgoebl/mobile-detect.js · GitHub
Mobile DetectのJS版があります。

まとめ

Mobile Detectを利用してしまえば、今後発売される端末への対応などの心配はなくなりますね。
しかも、MITライセンスなので商用や改造なども自由に行えます。
ただし、Mobile Detect自体をたまには最新版に更新してあげるのを忘れずにしましょう!

今日も知識欲は止まらない。

関連トピック

PHPのdate関数で「年」が文字化けした時の対処方法

PHPのエラーについて「PHP date 年 文字化け」です。 PHPで日付を表示する時に欠かせないdate関数ですが「Y年」が文字化

PHPで画像ダウンロードのボタンでリンクする方法

PHPを利用して画像をダウンロードさせるボタンを作成する方法メモです。 リンクボタンをクリックすると保存ダイアログが表示されて、ダウン

Yahoo!デベロッパーネットワークAPI 画像検索

検索API提供終了 有料版を含む検索APIが終了してしまいました・・・。 APIを利用したウェブアプリケーションのリスクですね。

PHPのdate関数で日付「昨日・明日・1時間前」を取得しよう!

PHPのdate関数を使えば自分の取得したい日付を1行でズバッと指定できます。 もう簡単すぎて、プログラムというよりは言葉で伝えてあげ

PHPで配列のエラー「Cannot use string offset as an array」がでる場合の対処法

PHPで「Cannot use string offset as an array」が出たら確認したいポイントをまとめました。 このエ

文字コードが違う!SJISのページをUTF-8に変更したらクエリ付URLが死んだ話

ガラケーサイトからスマホやPC向けサイトへとサイトを拡大する場合、 SJISだった文字コードを「この際だからUTF-8に一括で変更して

PHPエラー対処法 First argument should be an array

[code] First argument should be an array [/code] このエラーは、 最初の引数

SDカードに「XAMPP Portable」をインストールしてPHP開発環境ゲット!

PHP開発環境として何年かぶりにXAMPPの導入を決めたんですが、XAMPPの開発環境自体をクラウドで同期できないかというトリッキーな方

公開日:2011/08/01