個人店でもスマホサイトを重要視しだしてきた感もあります。
もちろんうち(igawaPCworks)でも最近PCサイトと同時にスマホサイトの注文が多くなってきています。
ここで活躍するのがPCサイトとスマホサイトを自動振り分けする機能。
ようするに閲覧者の利用端末を判別して振り分けを行うプログラムを仕込むということです。
■PCトップページ：
http://www.igawapcworks.com/index.html
■スマホトップページ：
http://www.igawapcworks.com/sp/index.html
例えば、上記の２つのトップページがあります。(※スマホサイトは実際にはありません)
スマホからPCトップページにアクセスがあったときに自動的にスマホトップページに行くようにするのです。
方法はいくつかあってphpや.htaccess、javascriptなど。
今回はもっとも簡単な方法javascriptでの自動振り分けの覚書を。
◆まずは下のソースを適当な名前を付けて保存します。例えば、furiwake.js
=======================================================================================================================
(function(){
var ua = navigator.userAgent.toUpperCase();
var url = document.location.pathname;
var spDir = '/sp/';
(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))?
isSP() :
isPC();
function isSP(){
if(url.match(spDir)){
return false;
}else{
location.href = spDir;
}
}
function isPC(){
if(!url.match(spDir)){
return false;
}else{
location.href = '/';
}
}
}());
=======================================================================================================================◆次に、<head>と</head>の間にfuriwake.jsを読み込む記述をしてあげるだけ。
=======================================================================================================================
<script type="text/javascript" src="furiwake.js"></script>
=======================================================================================================================
元ネタ（http://www.html5-memo.com/css3/pc_bunki/）
