2015年9月1日
スマートフォン対応サイトで、ユーザーによる表示モード(PC用表示・スマートフォン用表示)の切り替えを実装するPHPを紹介します。
レスポンシブWebデザインで、スマートフォンもPCも同一URLになるサイトに対応しています。
jQueryを利用した方法は、前回のスマートフォン対応のためのレスポンシブWebデザイン実用TIPSをご覧ください。
ユーザーが選んだ表示方法をCookieに記録することで、サイト内の表示方法を統一することができます。
下記は、ユーザーエージェント判定&スマートフォン用はCSSを「追加」&スマートフォン用表示をデフォルトとする場合のサンプルです。
<?php // 初期化 $sp = ""; $sp_head = ""; $sp_foot = ""; $mode = $_GET['mode']; // ユーザーエージェント取得 $ua = $_SERVER['HTTP_USER_AGENT']; // iPhoneかAndroidでフラグ立て if (preg_match("/iPhone|Android/i", $ua)) { $sp = 1; } // iPhoneかAndroidでPC表示を選択した場合 if ($sp && $mode == 'pc') { setcookie('mode', 'pc', time()+1209600); // Cookieを2週間保存 $sp_foot = '表示モード:<a href="?mode=sp">スマートフォン</a>'; //スマホ表示へのリンク } // iPhoneかAndroidでスマホ表示を選択した場合 if ($sp && $mode == 'sp') { setcookie('mode', 'sp', time()+1209600); // Cookieを2週間保存 } // iPhoneかAndroidでPC表示を選択していない場合 if ($sp && !$_COOKIE['mode'] == 'pc') { $sp_head = '<link rel="stylesheet" type="text/css" href="mobile.css" />'; // スマホ用CSS $sp_foot = '表示モード:<a href="?mode=pc">PC</a>'; // PC表示へのリンク } // HTMLヘッダー echo $sp_head; // フッター echo $sp_foot; ?>