iPhone用にCSSを適用させる

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で同じページを閲覧すると背景色が黒になります。

iPhone CSSの切り替え表示テスト

なお、media queryに関しては、IT戦記さんのエントリー「MediaQuery まとめ - IT戦記」に詳しく書かれています。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー