Blog

スマホ・タブレット・PCをPHPで条件分岐する方法

2018.02.23 コーディング

スマホ・タブレット・PC(ユーザーエージェント)によって条件分岐する方法のメモ。

読み込むCSSやJSなどの外部ファイルをユーザーの端末ごとに切り替えることで別々のレイアウトを適用させたり、画像の表示・非表示を切り替えたりするときに便利です。

スマホ・タブレット・PCで条件分岐するソース

PHP
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
?>

  //スマホの場合に読み込むソースを記述

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>

  //タブレットの場合に読み込むソースを記述

<?php } else { ?>

  //PCの場合に読み込むソースを記述

<?php } ?>

スマホとそれ以外で条件分岐するソース

スマホとそれ以外(タブレット・PCなど)とでレイアウトを切り替えたいときなどは下記のように分岐させます。

PHP
<?php
	$ua=$_SERVER['HTTP_USER_AGENT'];
	$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
		if ($browser == true){
		$browser = 'sp';
	}
	if($browser == 'sp'){
?>

  //スマホの場合に読み込むソースを記述

<?php }else{ ?>

  //タブレット・PCの場合に読み込むソースを記述

<?php } ?>

スマホ・タブレット・PCで読み込むCSSを切り替える場合の例

スマホの場合はsp.css、タブレットはtablet.css、PCはpc.cssをそれぞれ読み込むには、下記のように書きます。

PHP
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
?>
  //スマホ用CSSを読み込む
  <link href="css/sp.css" rel="stylesheet" media="all" />

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>

  //タブレット用CSSを読み込む
  <link href="css/tablet.css" rel="stylesheet" media="all" />

<?php } else { ?>

  //PC用CSSを読み込む
  <link href="css/pc.css" rel="stylesheet" media="all" />

<?php } ?>

ユーザーエージェントによってCSSを切り替える場合の注意点

ユーザーエージェント(ユーザーが使用している端末)によって分岐するので、メディアクエリのようにブラウザの幅によって表示が切り替わったりはしません。

つまりPCから閲覧している場合には、ブラウザのウィンドウサイズを小さくしてもスマホ用レイアウトに切り替わったりはしないということです。

ですので、デザイン上どうしても制約があるという場合以外には、個人的にはメディアクエリを使った方がいいと思います。

またこの方法でCSSを切り替える場合、Viewport設定も併せてしておくのがおすすめです。

PHP
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
?>
  //スマホ用
  <meta name="viewport" content="width=480,user-scalable=no">
  <link href="css/sp.css" rel="stylesheet" media="all" />

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>

  //タブレット用
  <meta name="viewport" content="width=768,user-scalable=no">
  <link href="css/tablet.css" rel="stylesheet" media="all" />

<?php } else { ?>

  //PC用
  <meta name="viewport" content="width=device-width"/>
  <link href="css/pc.css" rel="stylesheet" media="all" />

<?php } ?>

画像の表示切替には非常に便利！

レスポンシブウェブデザインの場合、レイアウト上の都合でどうしてもPC・スマホで別々の画像を表示させたいというケースもあります。

CSSでdisplay:noneなどを使って表示を切り替える場合、表示されていない画像も実際にはページ読み込み時に読み込まれてしまいます。

そのため、ページの表示速度に影響するおそれがあります。

しかし今回紹介した方法であれば、読み込むソース自体が違うため、表示に必要ない画像は読み込まないようにすることができます。

PHP
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
?>
  //スマホ用
  <img src="images/sp.png" alt="スマホ表示時のみ読み込まれる画像">

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>

  //タブレット用
  <img src="images/tablet.png" alt="タブレット表示時のみ読み込まれる画像">

<?php } else { ?>

  //PC用
  <img src="images/pc.png" alt="PC表示時のみ読み込まれる画像">

<?php } ?>