HTTP_USER_AGENTを利用してcssを切り替える

PC用のcssとスマホ用のcssを用意してデバイスによって読み込むcssを切り替えたいと思います。

最初に考えたのがlink要素の「media」属性を利用すること
メディアクエリというやつです

PC用

<link rel="stylesheet" type="text/css" media="screen and 
(min-width:901px)" href="css/style_pc.css"/>

画面サイズが901px以上の場合、style_pc.cssを読み込みます

スマホ用

<link rel="stylesheet" type="text/css" media="screen and
 (max-width:900px)" href="css/style_smp.css"/>

画面サイズが900px以下の場合、style_smp.cssを読み込みます

しかし、この方法だと画面サイズが判断されるのでPCで画面サイズを小さくした場合style_smp.cssを読み込んでしまいます

最近はスマホでも画面サイズが大きいのでスマホがstyle_pc.cssを読み込む可能性もあります

そこでユーザーエージェントを利用してcssを切り替えることにしました

<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
$isSmp = ((strpos($ua,'iPhone')!==false)||
　　(strpos($ua,'iPad')!==false)||
　　(strpos($ua,'Android')!==false));
?>

$_SERVER['HTTP_USER_AGENT']でユーザが利用しているOS情報等が取得できます

strposでユーザーエージェントにiPhone、iPad、Androidという文字列が存在するかチェックし
存在すればスマホと判断します

<?php if ($isSmp) {?>
<link rel="stylesheet" type="text/css" href="/css/style_smp.css" />
<?php } else {?>
<link rel="stylesheet" type="text/css" href="/css/style_pc.css" />
<?php }?>

$isSmpの値でスマホかどうか判別し読み込むcssを切り替えます

この状態でmax-device-withやmax-with等使ってスマホ用のレイアウトを
スマホとタブレットに切り替えたりPC用のレイアウトを解像度が低いPCと高いPCに
切り替えたりするのもいいかなと思ってます