iPhone対応サイト制作のまとめ
まず、iPod touch（iPhoneも同じ）のSafariの問題点
・Flashが使えない。
・オンマウスで情報を表示する事が出来ない。
・専用に作られていないとクリックミスが多い。
・大きいページはよく落ちる（ホームに戻ってしまう）
・大きいページは動作が読み込みに時間がかかり、動作がもっさりする。
・フォームからファイルがアップできない。
・jQueryを使ったドラッグ＆ドロップをしようとするとスクロールしてしまう。（専用にスクリプトを書けば回避できる）
cssやjavascriptが効いてるのでそこそこ見れるが普通の PCサイトをパソコンの様に見れるという訳では無く、Flashが使える分PSPなどのゲーム機の方がマシに思える。
結局、画面が小さいので専用ページは携帯サイト用のものを元に一回り大きく作る感じが効率的で、色々と複雑な事をしたいならアプリを作る方がいい。
■フォント
iPod touch、iPhone 3Gは日本語フォントが「ヒラギノ角ゴシック ProN」 のみだったがiPadには「ヒラギノ明朝 ProN 」が追加されたらしい
。等幅フォントを使いたいときは「font-family:monospace;」
font-family : ‘HiraMinProN-W3’ ;
font-family : ‘HiraMinProN-W6’ ;
■横幅
iPod touch・iPhone 3G
ポートレート（縦向き）：320px
ランドスケープ（横向き）：480px
iPhone4
ポートレート（縦向き）：640px
ランドスケープ（横向き）：960px
iPad
ポートレート（縦向き）：768px
ランドスケープ（横向き）：1024px
■電話番号を勝手にリンクにしてしまう
「-」（ハイフン）を含む数値をSarfariが勝手に電話番号としてリンクしてしまうので下記を記述して、その機能を抑制する。
<meta name="format-detection" content="telephone=no">
■回転させると文字が大きくなる
画面方向の切り替え時にSarfariが勝手に文字サイズを調整してしまうので、CSSを使ってその機能を抑制する。
body {-webkit-text-size-adjust: none;}
■スクロール
「overflow:scroll」が効かない。
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3
これは、拡大して二本指でなぞるとなんとかスクロール出来ない事はない。
■アイコン
iPod touch、iPhone 3G、iPhone4、iPadのWebClipアイコンは
以前（iOS1時代）は60x60pxで作成し、iPhoneで自動に57x57pxに変換されるのがキレイとされてましたがiOS2以降は57x57pxで作成する方がキレイに表示できる様になりました。
それがiPhone4、iPadの出現で今までのサイズだとボケボケになってしまうようになりました。
各端末のアイコンサイズは
iPod touch・iPhone 3G：57x57px
iPhone4：114x114px
iPad：72x72px
とまちまちです。
ただ大きい場合は縮小され、角を丸めたり、ライティングしたりしてくれるので大きい方が良くなりました。
実際、どんなサイズがいいのかというと、当のAppleは129ｘ129pxなのでこれに合わせて作成した方が無難かと思われます。
Tags: ipad, iPhone, iPod touch