<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:481px)" href="style.css" type="text/css" rel="stylesheet"/>
としておくと、iPhone/iPod touchではiphone.css、普通のブラウザではstyle.cssで読みこまれるらしい。
実機がないから動作未検証。

safariデフォルトだと、980pxに拡大表示されるので、
<meta name="viewport" id="iphone-viewport" content="width=480, maximum-scale=0.6667">
としておく。
スタイルシートを分ける場合、IE用のスタイルシートを用意しないと、media="screen..."を拾ってくれないので、スタイルシートが適用されない。
iPhone/iPod touch用、一般用、IE用の3通り分けることが可能。
<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width:481px)" href="style.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css">
<![endif]-->
今回は、IE用と一般ブラウザ用は同じものを使っています。
…なぜか拡大できないな…