最近はスマホサイト作成のお仕事も増えてきました。
ず~~と後回しになっていた我社のポータルサイト「恵那山ねっと」もやっとスマホサイトの公開にこぎつけました。
そこで、スマートフォン向けサイトとPC向けサイトそれぞれをディレクトリに分けて作成し、アクセスした端末によって自動で切り分ける方法を導入してみました。
最近よく見るのは、JavaScriptで振り分ける方法。
TOPページのヘッダーに以下を記述します。
これはこちらのサイト「栗きんとんめぐり」でも使っています。
<script type="text/javascript">
if (document.referrer.indexOf('kurikinton.info') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { if(confirm('栗きんとんめぐりへようこそ。\nこのサイトにはスマートフォン用のサイトがあります。\n表示しますか?')) { location.href = 'http://kurikinton.info/mobile/'; } } </script>
これが一番簡単なのでよいのですが、ポータルサイトのように何度もアクセスする人にとって、アクセスするたび毎回
「スマートフォン用のサイトがあります。表示するんか? アァ?」 と聞かれるのもうざいです^^;
そこで、
もう一つ.htaccessに記述する方法が便利です。
PCサイトを http://hogehoge.jp/
スマホサイトを http://hogehoge.jp/mobile/ とした場合、
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /mobile/ [R,L]
</IfModule>
これであれば、通常、スマホサイトからPCサイトに戻るとき、普通にアクセスしてもモバイルサイトに転送されてループしてしまいますが、PCサイトへのリンクのURLに
http://hogehoge.jp/?mode=pc というように、?mode=pcをくっつけるだけでとスマートフォンサイトに転送されなくなります。