ユーザーエージェントによって表示が変わるようにしました~☆

アドレスは同じままで、スマホやガラケーならシンプルな縦長のページ、
タブレットやPCなら並べ変わるページが表示されるように。

追記:
PHPで振り分けたのですが、MTのタグで使える方がいいので後でこちら使ってみます。
http://www.koikikukan.com/archives/2009/05/08-015555.php


php版 以下流し書き

・変数userAgentに端末の種類を入れておく。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
$userAgent = 'sp';
} elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad')!== false)) {
$userAgent = 'tab';
} elseif ((strpos($ua, 'DoCoMo') !== false) || (strpos($ua, 'KDDI') !==false) || (strpos($ua, 'SoftBank') !== false) || (strpos($ua,'Vodafone') !== false) || (strpos($ua, 'J-PHONE') !== false)) {
$userAgent = 'mobile';
} else {
$userAgent = 'pc';
} ?>

・見やすいswitchで振り分け
・インクルードしたphpから変数userAgentを使う場合は、
先にglobalを使う宣言。

<?php
global $userAgent;
switch ($userAgent) {
    case 'mobile':
        echo 'ガラケー';
        break;
    case 'sp':
        echo 'スマホ';
        break;
    case 'tab':
        echo 'タブレット';
        break;
    case 'pc':
        echo 'PC';
        break;
}
?>

・実際に使う時

<?php
global $userAgent;
switch ($userAgent) {
    case 'mobile':
    case 'sp':
        echo 'モバイル用';
        break;
    case 'tab':
    case 'pc':
        echo '大きい画面用';
        break;
} ?>

・複数行のechoにヒアドキュメント
  <<<の後にスペース入れたら構文チェックでエラーでたので入れず。EndofanEraの所はなんでもいいとのこと。普通EOM等。
・jQueryの変数の$を開いてしまうので、ヒアドキュメントを'で囲うと動きました。

<?php
    switch ($userAgent) {
        case 'tab':
        case 'pc':
            echo <<<'EndofanEra'
                $tiles.infinitescroll({
                  navSelector  : '#page-nav',
                  nextSelector : '#page-nav a',
                  itemSelector : '.article',
                  loading: {
                    msgText: '',
                    finishedMsg: '',
                  }
    }
EndofanEra;
            break;
    }
    ?>

前へ

ラフ「鬼ぃさん居た!」

次へ

Glyphのマインクラフトっぽいネトゲ。TROVEやってみる?