実際にiPhone向けのサイトを作成してみます。
ここでは、デフォルトのブックマークであるAppleのiPhone用オンラインヘルプページ「iPhone User Guide」を取り上げます。

今回取り上げるiPhone User Guideの特徴

実際のiPhone User GuideはプレーンHTMLではなくJavascriptで生成され、かなり深い入れ子構造になっていますが、 今回はこのページの特徴の一部を取り上げて再現してみます。

取り上げる特徴は

• 読み込み後にURLバーを隠す
• 拡大・縮小は出来ない
• iPhone横持ちの場合は、縦持ちの場合の1.5倍ズームになる

です。その他、PC/iPhone問わずSafariで使用可能なWebkitオプションにより、

• タイトルに影をつける
• リストを角丸にする

の2点を加えた全5点に着目します。

結果とソース

上記のようにほぼ再現することが出来ました。（実際のページはこちら）ソースは以下です。

 




             viewportの宣言


             URLバーを隠す
iPhone ユーザーガイド

• お使いになる前に
• 基本
• 電話
• メール
• Safari
• iPod
• その他のアプリケーション
• 設定
• iTunes Store
• トラブルシューティング
• その他の参考資料

要点

ポイントは以下です。

width=320px

予めコンテンツの横幅を320pxとします。

コンテンツと同幅のviewportを指定します。またuser-scalebleを指定し拡大・縮小が出来ないようにします。 initial-scaleはコンテンツとviewportが同幅であることから常に同じ値（iPhone縦持ちで1、横持ちで1.5）になることが期待できるため指定しません。
尚、iPhone User Guideで実際に指定されているviewportは

です。

onload="window.setTimeout('window.scrollTo(0, 1)', 500);"

ページをロードし500/1000=0.5秒後にウィンドウを縦方向に1pxスクロールします。 スクロールにより、iPhone用SafariはURLバーを自動的に隠してくれます。

text-shadow: #333 0px -1px 0px;

テキストに影をつけます。

-webkit-border-radius: 10px;

要素を角丸にします。