1. Home
  2. Archive
  3. iPhone用のCSSを読み込ませる方法

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

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

詳しくはIT戦記でとりあえげられているのでそちらを参照してください。
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コンディショナルコメントで読み込ませます。

とりあえずこれでiPhone用にCSSを読み込ませることができたんですが、なんかキモイなーという感じ。なんか他にいい方法ないのかなー?これならjs使ったほうがいいような気がする。迷いどころ。

コメントフォーム

スパムがひどいので一時的にコメントフォーム閉じます。ゴメンナサイ。