LIQUID DESIGN Tech Blog

レスポンシブWebデザインで、表示モード切り替え方法(PHP版)

スマートフォン対応サイトで、ユーザーによる表示モード(PC用表示・スマートフォン用表示)の切り替えを実装するPHPを紹介します。
レスポンシブWebデザインで、スマートフォンもPCも同一URLになるサイトに対応しています。
jQueryを利用した方法は、前回のスマートフォン対応のためのレスポンシブWebデザイン実用TIPSをご覧ください。
resp_foot.gif

PHPサンプル

ユーザーが選んだ表示方法を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;
?>
この記事を書いた人
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
SNSでフォローする