iPhoneサイトの作り方

メディアクエリー

CSS3の新機能。link要素のmedia属性にPC用とiPhone用にそれぞれ下記のコードを挿入する。
IEシリーズはメディアクエリーを解釈してくれないので、別途CSSを用意する必要があります。

PC用

media="only screen and (min-width: 481px)"

iPhone用

media="only screen and (max-width: 480px)"

IE用

<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all" /><![endif]-->

PC用は表示領域が481px以上のデバイス用のCSSという意味で、iPhone用は480px以下のデバイス用という意味。
iPhone 4のデフォルトの解像度は最低でも640pxあるので、なぜこれでiPhone 4でもiPhone用のCSSが適用されるのかも調査が必要…

2010年8月30日10時43分追記：
元々メディアクエリーはこのような使い方を想定されていたものではなく、あくまでハックとしての使い方ではないのでしっかりとしたスマートフォン対応のWebページを作る場合はスクリプトを用いてデバイスごとにページを分けて表示させるのが一番安全かつ正しい方法と言えそうです。

2010年8月30日17時13分追記1：
iPhone 4もview portは480pxが与えられているようです。

2010年8月30日17時15分追記：
さらに詳しくメディアクエリーについて調べたところ、必ずしもスマートフォンデバイス用とは言えませんが、それを想定しているような指定方法もあったので、使わない方が安全かつ確実ではあるが、このテクニックを使っても問題なく制作ができそうでした。

PC用と共通

• 従来の(X)HTMLとCSSで記述
• CSS3のメディアクエリーでCSSをわける（一番簡単で確実）
• （JSなどのスクリプトでUAに応じたCSSを出力）

Web制作会社のウルトラエルが共通のHTMLでCSSだけを変更して、うまくiPhone向けサイトを作っています。

iPhone専用

• HTML5+CSS3で記述出来る -> mobile Safari
• Sencha Touch, jQTouch, (jQuery mobile)などのJavaScriptライブラリを用いてマルチタッチインターフェイスに対応したネイティブアプリのような操作感のページを作成可能

WordPress、MTはプラグインやテンプレートを工夫して作り、大手レンタルブログなら自動的にiPhoneに最適化されるので手軽に実装できます。
ただし、プラグインやレンタルブログではカスタマイズの自由度は乏しいです。

viewport

mobile Safari独自の仕様で、コンテンツの表示領域の横幅と拡大縮小の可否とどこまで拡大縮小出来るかを指定出来る。
<meta name="viewport" content="width=device-width , user-scalable=no , inicial-scale=1 , maximum-scale=1" />

widthに指定出来るものは横幅の数値（960など）とdevice-width。
device-widthを指定するとデバイスのデフォルトの横幅で表示される。(恐らく480px）

viewportで指定できるプロパティは

width

ページロード時の横幅で標準値は980。利用可能範囲は200～10,000

height

ページロード時の縦幅で標準値は横幅の数値に対するアスペクト比によって設定される。利用可能範囲は223～10000

initial-scale

ページロード時のスケール値。標準値はスクリーンのサイズと同じ。利用可能範囲は[minimum-scale、maximum-scale]。ユーザは“ピンチ”および“ダブルタップ”でズーム値を変更可能

user-scalable

ユーザのズーム動作の制御。“No”にするとズーム機能をoffにできる。標準値は“yes”

minimum-scale

ズーム機能を利用する際の最小スケール倍率。標準値は0.25。利用可能範囲は0～10

maximum-scale

ズーム機能を利用する際の最大スケール倍率。標準値は1.6。利用可能範囲は0～10

お気に入りをホーム画面に登録したときのアイコン

<link rel="apple-touch-icon" href="画像へのパス" />
iPhone側で角丸、光沢、ドロップシャドウの処理が施される。
アイコンの解像度はiPhone 3GS以前は57px、iPadは72px、iPhone 4は114pxらしいですが、120pxで作っても見た目の違いがわかりませんでした。アイコンの解像度にこだわるサイトでは少し大きめのアイコンサイズで作られているようです。

フルスクリーンモード

お気に入りをホーム画面に登録した場合、ページをフルスクリーン表示にすることができる。
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

前者がページをフルスクリーンモードにする設定で、後者がフルスクリーンモード時のステータスバーの色を変更する指定になります。
後者に指定できる値はblack（黒）かblack-translucent（半透明）。

フルスクリーンモードの起動画面の画像

フルスクリーンモードの場合、アプリ風にローディング画面を作ることが出来ます。
<link rel="apple-touch-startup-image" href="画像へのパス" />

自動フォントサイズ変更を無効に

iPhoneの画面の方向を変えたときに自動でフォントサイズの調整がなされる場合がある。
それを回避するために下記のCSSを記述
-webkit-text-size-adjust: none;

アドレスバーを消す

JSにて画面読み込み後に表示位置をずらしてアドレスバーや検索バーを疑似非表示に。
画面を読み込んだ瞬間に設定すると不具合がおこるかのせいがあるので、100ミリ秒後に設定するのがベター。
setTimeout('scrollTo(0,1)',100)