iPhoneからのアクセスの場合にスタイルシートを切り替えたい場合 – デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

iPhoneからのアクセスの場合にスタイルシートを切り替えたい場合、動的なページか静的なページかによって、いくつかの方法が考えられる。

■PHPやPerl等で動的に書き出している場合

$_SERVER[‘HTTP_USER_AGENT’]
を取得して、「iPhone」や「iPod」が含まれるかによって書き出すヘッダを切り替えるようにするのが簡単。

「$_SERVER[‘HTTP_USER_AGENT’]」を使ったサンプルサイト
『Digital Gate for iPhone』
http://iphone.digital-gate.com/
上記URLをPCとiPhoneで開いてみると、レイアウトの違いが分かるはず。

■htmlで公開している静的ページの場合

★Javascriptを使用する方法

if (navigator.userAgent.indexOf(‘iPhone’) != -1){
document.write(‘<link rel=”stylesheet” type=”text/css” href=”./iphone.css”>’);
}else{
document.write(‘<link rel=”stylesheet” type=”text/css” href=”./pc.css”>’);
}

★Javascriptを使わない方法

max-device-width:※ および min-device-width:※ を使う

※「max-device-widthとは」「min-device-widthとは」スクリーンデバイスおよびハンドヘルドデバイスの最小および最大

今回のようにiPhone用に表示CSSを切り替えたい場合は、iPhoneのスクリーンサイズが320px×480pxであることを利用することで、iPhoneにのみ対応し、ほかのデバイスに影響しないスタイルシートを指定する。

このように、screen とmax-device-width:480pxを組み合わせることによって最大解像度が480pxのiPhoneの場合はiphone.cssを使うように指定できる。
なお、「only」を記載することにより、対応していない古いブラウザの場合に無視される。
ちなみに、ここでは最大解像度480pxとしているから、それ以下のハンドヘルドデバイス等もこのcssが適用されることになる。Windows Mobile端末等。

次に、PC向けのCSSの指定
<link media=”screen and (min-device-width: 481px)” href=”pc.css” type=”text/css” rel=”stylesheet”/>

こちらはmin-device-width:481pxを記載することにより、上記とは逆に最小解像度が481px、つまり481px以上のデバイスに適用される。

「Javascriptを使わない方法」のサンプルサイト
『iPhone iPod touchのブログコミ』
http://iphone-blog.digital-gate.com/
上記URLをPCとiPhoneで開いてみると、レイアウトの違いが分かるはず。