ヅラッシュ！ by NI-Lab.

せめてトップページだけでもそれっぽくしてみようと思って、iPhone用のページを作ってみた。

⇒ NI-Lab. (iPhone用トップページ)

問題は、iPhone / iPod touch の実機を持っていないし、Mac も持っていないので iPhone SDK + iPhone エミュレータも手元にないということ。
しょうがないので、Windows 上でそれなりにページの見た目を確認することにした。

Safari 3 on Windows で iPhone用ページを確認する

Windows 上で動く Safari 3 をインストールしてページを確認する。
iPhone 上のウェブブラウザも Safari なのでまぁ同じような見た目になるだろうと期待。

で、こんな感じになった。

また、Safari 3 の メニューから [編集] -> [設定] -> [詳細] -> メニューバーに[開発]メニューを表示
メニューから [開発] -> [ユーザーエージェント] -> [Mobile Safari 1.1.3 - iPhone]

とすると、iPhone の User Agent でウェブページにアクセスできるようになる。
今回は User Agent で振り分ける処理をしてないからぜんぜん意味がないけど。。。

AIR iPhone で iPhone用ページを確認する

次に、AIR iPhone という Adobe AIR 上で動く iPhone シミュレータを使ってみた。

で、見た目を確認するとこんな感じ。

ホントに実機でこんなふうになるのかなぁ。。。

参考にしたページ

Yahoo! JAPAN の iPhone 用トップページがHTMLとかCSSの参考になった。
⇒ Y!/SoftBank
⇒ 誕生！　iPhoneにピッタリのYahoo! JAPAN - Yahoo! JAPAN

あと、画面の解像度にも注意。

iPhoneのスクリーン解像度は、ポートレート表示（縦位置）の場合、横320px、縦480pxです。デバイスを回転させてランドスケープ表示（横位置）にすれば、縦320px、横480pxになります。

そのうち、ステータスバー、URLテキストフィールド、ボタンバーといった要素を省いた残りの領域がビューポートになり、ポートレート表示では、横320px、縦356pxとなります。

つまりiPhone版Safariに最適化Webアプリケーションを作りたければ、横320px、縦356pxでちょうど収まるようなデザインにすればよいのです。これが一番確実な方法で、例えばビルトインされているウィジェット（「計算機」や「天気」など）はこのサイズぴったりに作られています。

しかしiPhone版Safariは、Webページを表示するとき、デフォルトで縮小表示を行います。具体的には、横幅を980pxとして表示します。これは、一般的なWebサイトの横幅が入り切るサイズとして設定されたスケールです。つまりビューポートのデフォルト設定は、（ポートレート表示の場合）横幅980pxということになります。

iPhone向けWebアプリを作ろう（3/4） － ＠IT

Ref. はてなブックマーク - NI-Lab.の電子栞 / iphone_site