« 【MT5】複数のファイルを一括アップロード | メイン | jqueryを使って、現在いるページのリンクにクラス名を追加する方法 »

.htaccessを使ってスマホサイトとPCサイトの切り分ける方法

最近はスマホサイト作成のお仕事も増えてきました。

ず~~と後回しになっていた我社のポータルサイト「恵那山ねっと」もやっとスマホサイトの公開にこぎつけました。

そこで、スマートフォン向けサイトと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をくっつけるだけでとスマートフォンサイトに転送されなくなります。

工事・障害情報 (1)
パソコン (13)
フレッツ光プレミアム (3)
ホームページ作成 (8)
ウイルス・スパム対策 (6)
EC-CUBE (12)
Movable Type (11)
接続 (4)
機能 (1)
料金 (1)

About

2013年06月05日 14:00に投稿されたエントリーのページです。

ひとつ前の投稿は「【MT5】複数のファイルを一括アップロード」です。

次の投稿は「jqueryを使って、現在いるページのリンクにクラス名を追加する方法」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Take-net Service