Webtech Walker

iPhone用のCSSを読み込ませる方法

iPhoneのみにスタイルを読み込ませるにはMediaQueryというのを使います。MediaQueryはMediaTypeを拡張したもので、CSSを読み込ませるメディアをMediaTypeより細かく指定できます。

詳しくは以下を参照してください。

MediaQuery まとめ - IT戦記

具体的にどうやってiPhone用にCSSを読み込ませるようにするかというと、こんな感じです。

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="/css/default.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/css/iPhone.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="/css/default.css" /><![endif]-->

デバイスが481px以上ならdefault.css、デバイスが480pxならiPhone.cssを読み込みます。で、IEはMediaQueryに対応してないのでIE用にdefault.cssコンディショナルコメントで読み込ませます。

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