ユーザーエージェントによって表示が変わるようにしました~☆
アドレスは同じままで、スマホやガラケーならシンプルな縦長のページ、
タブレットや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;
}
?>
フォローしませんか?
