iPhone用のCSSを読み込ませる方法
- 2009年02月01日
- category:iPhone
- Comment(0)
- Trackback(0)
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使ったほうがいいような気がする。迷いどころ。
- Prev Entry
- dl要素の仕様についての疑問
- Next Entry
- surround.vimでHTML編集を効率化
コメントフォーム
スパムがひどいので一時的にコメントフォーム閉じます。ゴメンナサイ。
