先日、
WebサイトをiPadにも対応させてみようかと思っていると、Twitterのタイムラインに、iPad Detection Using JavaScript or PHPという記事を発見。
ご覧になっている方も多いかと思います。
User-Agentを判別した後、それをどう使うかは状況によって様々だとは思いますが、記事で紹介されている内容をCSS振り分けに使うとどう なるのか、試しにやってみました。
共通のテンプレートで条件分岐させるなら、とりあえずPHPで判別するのがラクなので・・・
$isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone'); $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
これで、iPhoneとiPadを判別できる、はず。
ちなみにiPhoneシュミレータとUser Agent Switcherで確認しただけで、実機検証はしていません。
判別が出来れば、あとは条件毎にPHPにソースを書いてもらえばいいので・・・
if($isiPad){
echo(
'<link rel="stylesheet" type="text/css" media="only screen" href="(iPad用CSSのパス)" />'."\n"
);
}else if($isiPhone){
echo(
'<link rel="stylesheet" type="text/css" media="only screen" href="(iPhone用CSSのパス)"/>'."\n
);
}else{
echo(
'<link rel="stylesheet" type="text/css" media="screen, projection" href="(PC用CSSのパス)" />'."\n"
);
}
これで済むかと。
とりあえず、備忘録として書いてみました。