画面のサイズは、横にしたときに480px。縦にしたときに320px。
つまり、そのためのCSSを当てなければなりません。

そこで、このblogでは

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<link media="only screen and (max-device-width:480px)" href="http://blog.nakatanigo.net/style.css" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:481px)" href="http://parts.blog.livedoor.jp/css/template.css" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:481px)" href="http://blog.nakatanigo.net/site.css" type="text/css" rel="stylesheet"/>

このような形で、CSSを記載しています。

最初の行で、viewportを使ってiPhoneでWebサイトを表示する際のディスプレイサイズを設定します。
これは、Safari on iPhone/iPod touchのために用意されたmeta要素らしいです。

その後、ディスプレイの最大幅が480pxまでなら、style.cssを読み込ませ、ディスプレイの最小幅が481px以上なら、site.css（livedoor Blogで使用しているCSS）を読み込ませます。

はい、ただそれだけですね。

iPhone用CSSは、実機で確認しながらいい感じに仕上げていけば良いと思います。


ただ、CSSなんてわからないよという方。
これからはサービス側でiPhone表示に対応するところがでてくると思うので、今しばらくご辛抱を。