処理を端末毎に分けて書きたい場合、PHPや、JSで条件分岐を書きたいという事があると思います。
バックエンドエンジニアの方々にとってはあたり前のことかもしれないですが、
WEBデザイナーやコーダーがフロントエンドのコーディングをする際は、メディアクエリでブレイクポイントをわけて、PC・タブレット・スマホの記述をCSSで分けるのが一般的です。
しかし、ブレイクポイントを分けるだけでは効かないときや、特定のデバイスで処理を分けたい場合は、ユーザーエージェントによって条件分岐を作成する必要があります。
下記は、PHPでの条件分岐の記述のメモです。
色々使いどころがあり、例えば、
「デバイス毎に読み込むCSSを分ける」
「デバイス毎に表示する画像を切り替える」
「特定のデバイスだけ特別なCSS,JSの処理を入れたい」
等、色々あるかと思います。
スマホ・タブレット・PCで条件分岐
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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 } ?> |
スマホとそれ以外で条件分岐する場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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の読み込みを切り替える場合
デバイス毎に読み込むCSSを切り替えたい場合は、下記のように、それぞれの、CSSを用意し、読み込ませると良いですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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 } ?> |
スマホ・タブレット・PCで画像の表示を切り替える場合
デバイス毎に画像の表示を切り替えたい場合は、下記のように、それぞれ画像を用意し、読み込ませると良いですね。
レスポンシブで画像切り替えの場合、display:none;で画像の表示・非表示を行うと、全ての画像をダウンロードしてから非表示にするので、重くなりがちですが、こちらの処理を使用すると、サーバ側で処理を行ってからブラウザに表示されるので、読み込む速度を速くする事が可能になると思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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="img/sp.jpg" alt="スマホの場合のみに読み込まれる画像"> <?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?> //タブレット用 <img src="img/tablet.jpg" alt="タブレットの場合のみに読み込まれる画像"> <?php } else { ?> //PC用 <img src="img/pc.jpg" alt="PCの場合のみに読み込まれる画像"> <?php } ?> |
まとめ
うまく使いこなす事で、デバイス毎のバグ回避や、読み込み速度の向上が期待できますので、実際に案件で積極的に取り入れる機会が増えそうですね。
18.05.27 | WEBデザイン制作・IT関連