So-net無料ブログ作成

パソコンとスマホの振り分け [html/css]

ホームページのパソコンでもスマホでも見られるようにする場合に、レスポンシブWEBデザインを使うことはよくあります。
1つの 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 は、パソコンとして振り分けしています。


nice!(2)  コメント(0) 
共通テーマ:パソコン・インターネット

nice! 2

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。