UA（ユーザーエージェント）を判定して最適なサイトを表示させたいと考え、Google先生に問い合わせたときのメモ。
以下のエントリーが参考になりました。

スマートフォン対応のためのレスポンシブWebデザイン実用TIPS
ユーザーエージェントによってPCとスマートフォンを振り分ける方法いろいろ
Androidタブレットは除外するスマホエージェント判定プログラム

やりたいこと

スマートフォンからのアクセスは専用ページに遷移させたい。それ以外のタブレット端末からのアクセスについては適宜CSSを切り替えてサイトを表示させたい。

自分用のメモ

参照は自己責任でお願いします。 iPhoneおよび、android端末（スマートフォン）の場合、専用ページへ遷移させる。それ以外のiPadおよびndroid端末（タブレット）の場合は、タブレット用のCSSを反映させる。

<script type="text/javascript">
//スマートフォンなら専用サイトに飛ばす。タブレットタイプは飛ばさない。
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
location.href = '/smart/';
}
//タブレットタイプの場合は専用のCSSを設定する。
if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
document.write('<link rel="stylesheet" type="text/css" href="./css/tablet.css" />');
} else {
document.write('<link rel="stylesheet" type="text/css" href="./css/style.css" />');
}
</script>

android（スマートフォン）の場合、UAに'Mobile'というキーワードが含まれており、これでスマートフォンからのアクセスなのか、タブレットからのアクセスなのかを判断するようです。

jQueryを使ってクラスを指定する。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script type="text/javascript">
$(document).ready(function(){
if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
$('body').addClass('tablet');
}
});
</script>

タブレット端末からのアクセスの場合、bodyタグにtabletクラスを指定する。これならCSSシグネチャが簡単に利用できそうですね。

課題にしている「レスポンシブデザインを考慮したサイト構築」に取り組むことができそうです。
ただね、動作確認用の実機がないんですよ。いまのところUAを偽装するプラグインを追加して動作確認するくらいしか思いつきません・・・。