HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

スマホからなのか、PCからなのか切り分ける

メディアの切り替えは、基本レスポンシブに任せておけばいいんだけど、
場合によっては、チェックして、表示内容を変えたい場合があるよね?
その時どうするか。
 
function.php にでも以下をいれておく。
function is_mobile(){
	if (is_admin())return;
	
	// $MOBILE_FLAG;
	$MOBILE_FLAG = false;
	
	$arr_useragent = array(
		'iPhone', 			// iPhone
		'iPod', 			// iPod touch
		'Windows Phone',	// Windows Phone
		'dream', 			// Pre 1.5 Android
		'CUPCAKE', 			// 1.5+ Android
		'blackberry9500', 	// Storm
		'blackberry9530', 	// Storm
		'blackberry9520', 	// Storm v2
		'blackberry9550', 	// Storm v2
		'blackberry9800', 	// Torch
		'webOS', 			// Palm Pre Experimental
		'incognito', 		// Other iPhone browser
		'webmate' 			// Other iPhone browser
	);
	$pattern = '/'.implode('|', $arr_useragent).'/i';
	$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);

	// Check Android device
	if (!$result) {
		// For Android mobile
		$arr_useragent = array('Android', 'Mobile');
		$pattern = '/^.*(?=.*'.implode(')(?=.*', $arr_useragent).').*$/i';
		$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
	}
	$MOBILE_FLAG = $result;
	return $MOBILE_FLAG;
}
?>

あとはいいよね?
一か所で聞くなら if の中できけばいいし、あちらこちらで聞くなら,
global $MOBILE_FLAG; とかを設定しといてそれに代入しておく。
例えば、一か所
<?php if( is_mobile() ){
    echo 'モバイルからだしぃ';
}else{
    echo 'モバイルからぢゃねーしぃ';
}
?>
 
グローバル変数で使いまわす。
function.php の function 群の外で、$MOBILE_FLAG; を宣言しておいて、
$MOBILE_FLAG=false;
function is_mobile(){
	if (is_admin())return;
	
	// $MOBILE_FLAG;
	global $MOBILE_FLAG;
	
	$arr_useragent = array(
		'iPhone', 			// iPhone
		'iPod', 			// iPod touch
		'Windows Phone',	// Windows Phone
		'dream', 			// Pre 1.5 Android
		'CUPCAKE', 			// 1.5+ Android
		'blackberry9500', 	// Storm
		'blackberry9530', 	// Storm
		'blackberry9520', 	// Storm v2
		'blackberry9550', 	// Storm v2
		'blackberry9800', 	// Torch
		'webOS', 			// Palm Pre Experimental
		'incognito', 		// Other iPhone browser
		'webmate' 			// Other iPhone browser
	);
	$pattern = '/'.implode('|', $arr_useragent).'/i';
	$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);

	// Check Android device
	if (!$result) {
		// For Android mobile
		$arr_useragent = array('Android', 'Mobile');
		$pattern = '/^.*(?=.*'.implode(')(?=.*', $arr_useragent).').*$/i';
		$result = preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
	}
	$MOBILE_FLAG = $result;
	return $MOBILE_FLAG;
}
?>
 
index.phpの頭辺りで is_mobile を呼んでおいて、
<?php if( $MOBILE_FLAG ){
    echo 'モバイルからだしぃ';
}else{
    echo 'モバイルからぢゃねーしぃ';
}
?>

関数の中で使う場合は、
function hoge()
{
    global $MOBILE_FLAG;
    if( $MOBILE_FLAG ){
        echo 'モバイルからだしぃ';
    }else{
        echo 'モバイルからぢゃねーしぃ';
    }
}
?>


WordPressのレスポンシブ対応のポイント

レスポンシブ(スマホ、ブラウザの自動切り替え)で一番悩むのがテーブル。
横に長い項目をもつテーブルはレスポンシブの画面幅の狭いモニターに表示させるのは案外面倒だ。
様々なグリッドモジュールが出ているが、以下のように横方向に項目が多いとタイトルブロックとデータブロックが分離してしまう。

ブラウザで見た時
項目名1項目名2項目名3
項目値1項目値2項目値3
項目値A項目値B項目値C
項目値イ項目値ロ項目値ハ

スマホで見た時
項目名1
項目名2
項目名3
項目値1
項目値2
項目値3
項目値A
項目値B
項目値C
項目値イ
項目値ロ
項目値ハ

せめてスマホで見た時以下のようなパターンにならないかな?

パターン1
項目名1項目値1
項目名2項目値2
項目名3項目値3
項目名1項目値A
項目名2項目値B
項目名3項目値C
項目名1項目値イ
項目名2項目値ロ
項目名3項目値ハ

パターン2
項目名1
項目値1
項目名2
項目値2
項目名3
項目値3
項目名1
項目値A
項目名2
項目値B
項目名3
項目値C
項目名1
項目値イ
項目名2
項目値ロ
項目名3
項目値ハ

パターン3
項目名1
項目名2
項目名3
項目値1
項目値2
項目値3
項目名1
項目名2
項目名3
項目値A
項目値B
項目値C
項目名1
項目名2
項目名3
項目値イ
項目値ロ
項目値ハ


パターン3が一番よさげな気がする。

テーブル部分だけをPHPで切り替えて表示するようにしてあげるという手があるかな?

例えば、
if(!is_mobile()){
echo '<table><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値1</td></tr><tr><td>項目値2</td></tr><tr><td>項目値3</td></tr><tr><td>項目値A</td></tr><tr><td>項目値B</td></tr><tr><td>項目値C</td></tr><tr><td>項目値イ</td></tr><tr><td>項目値ロ</td></tr><tr><td>項目値ハ</td></tr></table>';

}else{
echo '<table><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値1</td></tr><tr><td>項目値2</td></tr><tr><td>項目値3</td></tr><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値A</td></tr><tr><td>項目値B</td></tr><tr><td>項目値C</td></tr><tr><th>項目名1</th></tr><tr><th>項目名2</th></tr><tr><th>項目名3</th></tr><tr><td>項目値イ</td></tr><tr><td>項目値ロ</td></tr><tr><td>項目値ハ</td></tr></table>';
}

もちろん、べたで2つ書くと項目を増やしたりするとき不便なので配列かなにかで処理させた方がいいけど、イメージとしてはこんな感じでしょう。

スポンサーリンク

スポンサーリンク

カテゴリー