パソコンとスマホの振り分け

ホームページのパソコンでもスマホでも見られるようにする場合に、レスポンシブWEBデザインを使うことはよくあります。
１つの html ファイルでパソコンにもスマホにも対応できるので、手軽で便利です。

しかし、パソコンとスマホで、まったく別の画面を表示したいという場合があります。
レスポンシブWEBデザインでもできなくはないですが、SEO的によくないし、複雑な書き方になってしまいメンテナンス性もよくありません。
（ガラケーが対象の場合は、レスポンシブでは対応できません）
なので、パソコン画面とスマホ画面を別々に作り、自動で振り分けることになります。



パソコンとスマホの振り分けは、ユーザーエージェントで判別します。
ホームページにアクセスしてきた時に、パソコンかスマホかを判断し、パソコンだったらパソコン用の html を表示、スマートフォンだったらスマホ用の html を表示します。

ユーザーエージェントをどのように判断するかは、そのホームページの仕組みによって変わってきます。
また、スマホの新しい機種が出ると、ユーザーエージェントが変わっている場合もあるので、確認が必要になってきます。

一番手軽なのは、javascript で振り分ける方法です。
javascript の利用が可能なのであれば、index.html 内に仕込みます。
スマホであれば、index_sp.html を表示します。

<!--<script type="text/javascript">
if (document.referrer.indexOf('hal.biz-box.jp') == -1 && 
((navigator.userAgent.indexOf('iPhone') > 0 && 
navigator.userAgent.indexOf('iPad') == -1) || 
navigator.userAgent.indexOf('iPod') > 0 || 
navigator.userAgent.indexOf('Android') > 0)) {
	location.href = 'index_sp.html';
}
</script>-->

javascript が利用できない環境だった場合、.htaccess に記述することもできます。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ index_sp.html [R,L]
</IfModule>

php が使えるのであれば、いろいろと応用が利くと思います。
例えば、ユーザーエージェントの他に、データベースのデータも使って振り分けるみたいな場合です。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,'iPhone')!==false && strpos($ua,'iPad')===false) || 
strpos(ua,'iPod')!==false || 
strpos($ua,'Android')!==false || 
strpos($ua,'Windows Phone')!==false) {
	$terminal = 'sp';
	header("Location: index_sp.html");
	exit();
}
?>

※ iPad は、パソコンとして振り分けしています。

タグ：JavaScript 振り分け スマホ パソコン htaccess PHP