【Javascript】iPhone 3G用のWebページを作る1

ビューポート

iPhoneでは、PCでいういわゆるウインドウの代わりに、ビューポート(view port)という言葉が使われています。

ビューポートは、 簡単に言うとコンテンツ領域のことですが、iPhone版SafariにはPCのようにユーザーがサイズを変えたりスクロールバーなどで操作するウインドウがなく、 代わりにビューポートをジェスチャで操作することでコンテンツ内をズームインして移動するといった捕らえ方をします。

Webページが読み込まれると、iPhone画面の幅にWebコンテンツの幅がフィットするサイズになるように縮尺の初期値が設定されます(ビューポートのデフォルトの幅は980ピクセルです)。

これをユーザーがタップしたりズームして操作するわけです。

iPhoneでは、このサイズやスケール(縮尺)などを前ページのようにページ製作者が メタタグで指定することができるわけです。

前ページのメタタグは次のようなものでした。

<meta name="viewport" 
      content="width=320; initial-scale=1.0; user-scalable=0;">

このcontent属性に書かれている文字列は、 widthがビューポート幅を320ピクセル、initial-scaleで初期スケールを1.0として、 user-scalableにより iPhoneユーザーがズームすること禁止する、という意味になっています。

では、ビューポートメタタグに使えるプロパティをみておきましょう。

プロパティ	機能
width	ビューポートの幅(ピクセル)。デフォルト値は980。範囲は200から10,000まで。 下表の定数device-widthでも良い。
height	ビューポートの高さ(ピクセル)。デフォルト値は980。範囲は223から10,000まで。 下表の定数device-heightでも良い。
initial-scale	ビューポートの乗数としての初期スケール。 デフォルトはWebページを可視のエリアにフィットさせます。 範囲は、minimum-scaleとmaximum-scaleから測定されます。 あなたは、Webページが表示される最初ビューポートのスケールだけをセットできます。 user-scalable が noでなければ、その後、ユーザーはズームすることができます。 そのズーミングは、 minimum-scale と maximum-scale により制限されます。
minimum-scale	ビューポートの最小スケール。デフォルトは、0.25です。 範囲は0 から 10.0まで。
maximum-scale	ビューポートの最大スケール。 範囲は0 から 10.0まで。
user-scalable	ユーザーが拡大・縮小することができるかどうかをyes/noで指定します。

定数	機能
device-width	装置の幅(ピクセル)。 iPhone 1.1.1以降で使えます。
device-height	装置の高さ(ピクセル)。 iPhone 1.1.1以降で使えます。

これらの、content属性の値には、次のプロパティと定数を指定することができ、すべての値を指定せず省略しても、Safariが残りの値を自動計算してくれます。

では、次ページ以降、試しにメタタグの指定を代えて、どのように表示されるか簡単に眺めてみます。 まず、ビューポートを指定しない場合をみてみます。 (このテストをするときは、読み込み後のユーザーの操作が残ったキャッシュをクリアすることに注意が必要です)