これからiPhone & iPadを制作想定環境にしっかりと取り入れてコーディングしていくことが多くなりそうですが
そんな際に役立ちそうなCSS切り替え方法の紹介。

まだiPhone & iPad向けCSSハックは発見されていないようですが(そもそも無理な気がしています…)
iPhone & iPadそれぞれに別々のCSSファイルを読み込ます、といった方法がありました。

HOWTO-CSSforiPad.jpg
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の振り分けが必要になった際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

iPhone & iPad それぞれにCSSを切り替える方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR