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]-->
