- iPod touch
- iPod touch,iPhone対応サイト
- 実際のCSSの振り分け方
当サイトは以前までならCSSの外部ファイルへのリンクの指定の場合、mediaの部分はmedia=allという設定でした。
つまりどんなマシンで見ようとも同じCSSで見せるという形になっていました。
実際のソースの書き方
今回iPod touch,iPhone専用にCSSファイルを作成して、iPod touch,iPhoneにのみそのCSSファイルを見せるために、以下のソースで対応しています。
<link href="./c/ipodtouch.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="./c/base.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" />
<!--[if IE]>
<link href="./c/base.css" rel="stylesheet" type="text/css" />
<![endif]-->
一番最初の media="only screen and (max-device-width: 480px)"でiPod touch,iPhone専用の外部CSSファイルを参照させています。(画面表示幅が480px以下の場合には・・・という設定)
画面表示が481pxより大きい場合は2番目の外部CSSファイルを参照させています。つまり通常のパソコン関連に参照させるCSSです。
本来であれば2番目までの外部CSSファイルへのリンク設定で事足りるのですが、このCSSのmediaクエリはIEは対応していないようで最後の
<!--[if IE]>・・・<![endif]-->
の記述が必要となってきてしまいました。
- サイト
