iPhone生活

iPhone向けホームページ開発

iPhone User Guideを作る

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

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

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

取り上げる特徴は

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

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

結果とソース

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

 


TEST

             viewportの宣言


             URLバーを隠す

iPhone ユーザーガイド

Trademark and © 2008 Apple Inc.l All rights reserved.

要点

ポイントは以下です。

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;
要素を角丸にします。
Copyright © ipn3g.com, All Rights Reserved.