WEB Tips デザイン・コーディング

スマホ・PCを判別してリダイレクトするまとめ

2015-12-18

本記事にはプロモーションが含まれています。

スマホ・PCを判別してリダイレクトするまとめ

PC用ページとスマホ用ページが別々に存在する場合、ユーザーエージェントで振り分けるのが一般的です。

.htaccess , JavaScript , PHPでのスマホ・PCの条件分岐をまとめました。

ユーザーエージェント

iPhone[iPhone]が含まれていて[iPad]が含まれていない
Android[Android]か [Mobile]が含まれている
Windows Phone[Windows Phone]が含まれている
PCそれ以外

.htaccess で自動的に振り分ける方法

一番よく使います。

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

4行目のRewriteCond %{QUERY_STRING} !mode=pcは

?mode=pc

というパラメーターが付与されていないときだけリダイレクトする
付与されている場合はリダイレクトしないという意味です。

スマホ用ページからPC用ページにリダイレクトする場合

使う機会はあまりないと思うが、検索結果でスマホ専用ページがPC用のページより上位に来ちゃったからスマホページにアクセスしたらPCページに飛ばしたいときなど

その場合、3行目を以下のように変更します

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

JavaScript でスマホ用ページにリダイレクトする

JavaScriptでユーザーエージェントを判定して合致した場合はスマホ用URL「/sp/」へリダイレクトする方法です。

var ua = navigator.userAgent;

if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0  )|| ua.indexOf('Windows Phone'))
	{
		location.href = '/sp/';
	}

indexOf()メソッドは、指定したキーワードの発見位置を返す。
発見できなければ「-1」を返すので、0より上であればキーワードが発見できたことになります。

iPadは「-1」で除外、Androidのタブレットも除外しています。

navigator.userAgentが「iPhone」だった場合

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0{
//iPhoneだったときの処理
}
</script>

navigator.userAgentがiPhoneじゃなかったとき

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') == -1{
//iPhoneじゃなかったときの処理
}
</script>

PHPによるスマホ、PCの振り分け

<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)||(strpos($ua,’Android’)!==false && (strpos($ua, 'Mobile') !== false)) {
header(“Location:/sp/”);
exit();
}
?>

参考

AllAbout PC版とスマートフォン版サイトを自動振り分けする方法

.htaccessでPCサイトとスマートフォンサイト切り替え

JavaScript とかによるブラウザ判定方法のまとめ

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-, ,