■画面サイズ

---

960×640（3GSまでは480×320）
HTML4.01、XHTML1.0のに対応、CSSは2と3の一部に対応
画面上部にステータスバーやURLバー、画面下にボタンバーが表示

1024×768
横幅980までに縮小表示される。
壁紙を用意するときは。1024×1024で用意

※以下基本iPhoneに関しての情報ですが、iPadについてもだいたい当てはまるんじゃないかと思います。

■マウスオーバーイベントは注意

---

すべての操作をタッチパネルで行うため一部のイベントの処理が異なる。
対象となるオブジェクトをタッチした際にマウスオーバーイベントとマウスクリックイベントが同時に発生する。
マウスオーバーで表示するメニューなどは、マウスクリックによるポップアップを行うように修正する。

■スクロールバーは存在しない。

---

■表示できるHTMLファイル（画像の大きさやファイルサイズ）

---

GIF、PNG、TIFF　 画素数2メガピクセルまで
JPEG画像 画素数32メガピクセルまで
アニメーションGIF ファイルサイズ2MBまで
canvas要素 ファイルサイズ2MBまで
そのほかのファイル（HTML、CSS、JavaScriptなど） ファイルサイズ10MBまで

■JavaScriptの実行時間は最大10秒間

---

■フォーム要素

---

■特定のリンクをクリックすると専用アプリケーションが起動

---

■一部のwindow関連JavaScriptの動作が異なる

---

ダイアログを表示するJavaScript関数については、alert()とconfirm()、prompt()のみサポート。

■FlashやJavaアプレットには非対応

---

iPhoneがサポートする動画/音声ファイル形式

---

---

WebサイトをiPhoneに対応させるテクニック

---

■ページの横幅を指定する

---

iPhoneはWebページを表示する際、横幅が980ピクセルであると仮定してレンダリングし、横幅320ピクセル（横長は幅480ピクセル）に収まるように縮小して表示している。（iPhone4はこの倍に縮小という解釈なのかな？）
headタグ内「<meta name=”viewport” content=”000″>」で横幅を指定（000=横幅）
　

width 想定するWebページの幅
height 想定するWebページの高さ
initial-scale ページの初期表示スケール
minimum-scale ページの最小スケール。0以上10.0以下で指定する
maximum-scale ページの最大スケール。0以上10.0以下で指定する
user-scalable noを指定すると、ユーザー操作での拡大/縮小やスクロールを禁止

■テキストのサイズを調整する

---

基本となるテキストのサイズは自動的に決定している。
フォントサイズが小さすぎる、もしくは大きすぎる場合はCSSの「-webkit-text-size-adjust」プロパティで変更が可能（iPhone版Safariでのみ有効 ※iPad未確認）
「html {-webkit-text-size-adjust:000%} 」

■iPhone・iPadホーム画面用アイコンを用意する

---

「apple-touch-icon.png」というファイル名のPNG画像をサイトのルートディレクトリに置く。
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”>
アイコンがボタンとして登録される際には自動的に角が丸められ、ドロップシャドウや光沢が追加されてiPhoneらしいボタンになる。
※角丸処理だけでいい場合は、「apple-touch-icon-precomposed.png」にする。
　

iPhone：57×57
iPhone 4：114×114
iPad：72×72
　
各共通化するのに256×256がいいとか、144×144がいいとか、Appleは129×129を使用しているという話があるけどよくわからない。

■各デバイスでCSSを分ける

---