PC、スマートフォン、携帯端末で同一URLにアクセスしたときのページの切り替え

深いところまでこらなければめっちゃ簡単！！
非常にシンプル！！


エレガンスなコードを書きたい人には向かないかも・・・。
僕の備忘録なんで、使いたい人は使ってください！


まず以下の要件を順に遂行していく。
1.モバイルアクセスかPCアクセスか判別する
2.モバイルとPCそれぞれ見せたいページに遷移する
3.PCかスマフォ系か判別する
4.PCとスマフォ系それぞれ見せたいページに遷移する
（ソースコードはまとめて全部下に記載します。）

1.モバイルアクセスかPCアクセスか判別する
.htaccessファイルやcgiを使用するのが一般的らしいのですがもっと簡単に。
モバイルってheadタグに記入するmetaタグをどうやら認識しないようです。
判別にはhttp-equiv="refresh"を使用します。


2.モバイルとPCそれぞれ見せたいページに遷移する
http-equiv="refresh"を使用するならcontent属性にURLを記載するだけでOK！


3.PCかスマフォ系か判別する
PHPやcgiを使用するのが一般的らしいのですが、いちいちめんどくさいので
JavascriptでHTTPリクエストヘッダを取得して、
その値をif文で制御するようにします


4.PCとスマフォ系それぞれ見せたいページに遷移する
後はlocation.hrefで指定URLに制御するって方式です。


以下ソースです
1.モバイルアクセスかPCアクセスか判別する
2.モバイルとPCそれぞれ見せたいページに遷移する

/*モバイル用ページとなります*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<meta http-equiv="refresh" content="0;url=scratch_pc.html">
</head>

<body>
<h1>これはモバイル用ページです。</h1>
</body>
</html>


3.PCかスマフォ系か判別する
4.PCとスマフォ系それぞれ見せたいページに遷移する

/*PCページとなります*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<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) {
 
        location.href = 'scratch_smartphone.html';

}
</script>
</head>

<body>
<h1>これはPC用ページです。</h1>
</body>
</html>

/*スマフォ系ページとなります*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>
<h1>これはスマフォ用スクラッチページです。</h1>
</body>
</html>