iPhone向けのCSS

作りこんだ通りのサイズで、そのまま表示させたい場合は、

<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />

とするのが吉とのこと。
ユーザの拡大縮小操作も禁止して、デザイナが意図したサイズに表示させる。
(このピンチイン・ピンチアウトも iPhone の素晴らしい機能だと思うけど?)

JavaScriptでユーザエージェントの判別を使わずに、CSSを使って

<link media="only screen and (max-device-width:480px)"
href="ipodtouch.css" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:481px)"
href="pc.css" type="text/css" rel="stylesheet"/>

とすると、PC 用と iPhone 用の CSS を 区別できて吉、とのこと。
会場では [if IE] も案内されていましたが、公開スライドでは省かれている模様。

条件分岐が複雑になりそうなので、あるいは gihyo.jp に載っている

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

PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法