これからiPhone & iPadを制作想定環境にしっかりと取り入れてコーディングしていくことが多くなりそうですが
そんな際に役立ちそうなCSS切り替え方法の紹介。
まだiPhone & iPad向けCSSハックは発見されていないようですが（そもそも無理な気がしています…）
iPhone & iPadそれぞれに別々のCSSファイルを読み込ます、といった方法がありました。
≫HOWTO: CSS for the iPad [Update] « Thomas Maier – web & communication designer
CSSを読み込む際の『media』属性を使ってiPhone & iPad向けのメディアタイプを入れることで、
他のブラウザはそれを無視する構成のもよう。
指定方法については以下。
◆iPhone
＜link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /＞◆iPad
＜link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /＞『media』属性の中の『max-device-width』の値を変えることでiPhoneとiPadを分けています。
変にゴチャゴチャしたハックではなく、記述もスマートなので◎。
早速、iPad向けコーディングでCSSで指定した背景画像（PNG & GIF）が表示されないと言う現象にハマった為、
原因解明に大いに活用させていただきました。
背景画像が表示されなかった原因は画像ファイルサイズのデカい画像をそのまま張り付けていた為に
処理途中で弾かれていたもよう。（よく考えてみれば当たり前のこと…）
iPad向けの切り替えは他にもJavaScriptでやる方法もあるもよう。
≫本当にiPad“だけ”にCSSを読み込ませるには。
iPhoneとiPadでCSSの振り分けが必要になった際に是非。。。