CSS3のmedia queryを使います。
たとえば、PC向けに「pc.css」、iPhone向けに「iphone.css」を適用させたいと思った場合、以下のように記述します。
<link media="only screen and (max-device-width:480px)"
href="iphone.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)"
href="pc.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="pc.css" type="text/css" rel="stylesheet" />
<![endif]-->最後、IE向けに条件分岐を書いているのは、IE7含めIEがmedia queryに対応していないからです。
サンプルページ（http://www.projectdd.jp/iphone/hybrid.html）を作ってみました。
PCで閲覧すると背景色が白になっていますが、iPhoneで同じページを閲覧すると背景色が黒になります。
なお、media queryに関しては、IT戦記さんのエントリー「MediaQuery まとめ - IT戦記」に詳しく書かれています。
コメントする