iPhone用にCSS/PHP/JavascriptでCSSを切り替える基本的な方法

みなさん、こんにちは、まーしーです
週末の不摂生がたたって唇が荒れるやら口内炎やら。食事がつらくてげんなりなこの頃です。

さて、Webサイトを多メディアに対応させるという話は先日の「webデザインNight!」でも話題にあがっていました。その簡単な例としてiPhoneとPCとで分ける方法を考えてみます。

仕様によってどういう方法でどんなWebサイトにするのかを考える必要がありますが、とりあえずCSS、PHP、JavaScriptの3つで読み込むレイアウトCSSを切り替える、という方法を考えてみます。

CSSのみで切り替える

まずは簡単にCSSだけで切り替える方法です。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="./layout/iphone.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="./layout/pc.css" />

デバイスの幅を基準に判定してCSSを切り替えています。

PHPで切り替える

次にPHPで切り替える方法です。まずはUAを調べます。

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    $browser = 'iphone';
  }
?>

HTMLの最初に記述してUAを判定しておきます。

<?php if($browser == 'iphone'){ ?>
<link rel="stylesheet" type="text/css" href="./layout/iphone.css"/>
<?php }else{ ?>
<link rel="stylesheet" type="text/css" href="./layout/pc.css" />
<?php } ?>

UAがiPhoneならiPhone用のCSSを読み込む、という感じです。

JavaScriptで切り替える

次に、JavaScriptで切り替える方法です。

<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('<link rel="stylesheet" type="text/css" href="./layout/iphone.css">');
}else {
document.write('<link rel="stylesheet" type="text/css" href="./layout/pc.css">');
}
</script>

UAをJavaScriptで判定して読み込むCSSを切り替えています。

ということで

簡単な紹介ですが、本当に基本の基本はこんな感じです。
画像サイズ等々考えないといけないことはWebサイトによって色々ありますが、それはまた別の時にでも。

最低限の対応が必要なときなどの参考程度に。