このエントリーをはてなブックマークに追加

レスポンシブ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;
?>

WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter