サイトの仕様やデザイン面など様々な事情によりレスポンシブWebデザインを利用してスマホ最適化の対応ができない場合、PC版とスマホ版のサイトを別々に用意することがあります。そのような場合はユーザーがどの端末でアクセスしてきたかによって表示させるページを指定しなければなりません。そこでユーザーエージェント（UA）ごとにページを切り替える方法を紹介します。

Javascriptによる切り替え

1つはJavascriptを使ってUAを判定してそれぞれのページへ誘導する方法です。例えば、iPhone、iPad、Androidを使ってアクセスしてきた場合にスマートフォンサイトに移動させるためには以下のようなスクリプトをHTMLに記述します。

<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('Android') > 0) {
  location.href = 'http://www.example.com/sp/';
}
</script>

「location.href」の部分に表示させたいスマホサイトのURLを指定します。これで、ユーザーの端末にあるブラウザが解釈をしてそれぞれのページへ移動させることができます。これは、Javascriptを利用して切り替えているので当然、ユーザー側でJavascriptがOFFにしていたり、そもそもJavascriptに対応していない場合はページを振り分けることはできません。

サーバーによる切り替え

もう1つはサーバーを利用してページを切り替える方法です。この場合は.htaccessというファイルに記述して振り分けます。

option +FllowSymLinks
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone | iPad | Android)
RewriteRule ^$/sp/[R]

これをルートディレクトリにアップロードすれば、サーバー側で処理をしてUAごとにページを振り分けることができます。ただし、.htaccessを利用できる環境であることが前提となります。

それぞれの環境や状況に応じて、やりやすい方法でユーザーを最適なページへ誘導させると良いでしょう。

おすすめの記事