iPhone向けWebアプリを作ろう

■ ビューポートの設定

　iPhone版Safariの独自仕様を理解するうえで一番混乱しやすいのが、ビューポートの振る舞いです。ビューポートとは、コンテンツが表示される領域のことです。デスクトップのWebブラウザでは、コンテンツの横幅が大きくてウィンドウ内に表示し切れない場合、ユーザーはウィンドウの枠をドラッグして広げる（あるいは最大化する）ことができます。

　しかし、ビューポートの物理サイズは固定されているので、コンテンツの方を縮小／拡大することで、一度に表示する内容量を調節することになります。

・ ビューポートのデフォルト幅

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

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

画面4　ビューポートのサイズは320×356ピクセル

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

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

画面5　デフォルトでは横幅980pxで表示される

・ ビューポートメタタグ

　ビューポートの設定（ページの読み込み時にどのような拡大率でコンテンツを表示するか）は、ビューポートメタタグによって開発者が任意に指定することができます。ビューポートメタタグは次のような書式となり、HTMLのそのほかのmeta 要素と同様にhead要素内に記述します。

<meta name = "viewport" content = "width = 700">

　この例の場合、Webページが読み込まれたときに、横幅700pxのページがぴったり収まる拡大率で表示されることになります。

画面6　横幅700pxのページを表示すると、デフォルトで余白ができる

画面7　ビューポート幅を700pxに指定すればぴったり表示される。

　もし、iPhoneの解像度に合わせて横幅320pxのWebページを作ったとしても、ビューポートのデフォルト幅は980pxですから、そのままだと縮小表示されてしまいます。ですから、正しく表示させるためには、ビューポートメタタグで横幅を320pxに指定しなければいけません。

　その際、iPhone 1.1.1 以降では「device-width」という値が指定可能になっており、これを指定すれば自動的に320px（そして将来登場するデバイスの横幅）と同等の設定になります。

<meta name = "viewport" content = "width = device-width">

画面8　「device-width」と設定してもぴったり表示される

・ リキッドレイアウトとビューポート設定

　リキッドレイアウト（コンテンツを包含するブロック要素の幅を％で指定したレイアウト）の場合、インライン要素は、ビューポートメタタグで指定した横幅内で折り返そうとします。例えばビューポートの幅を600pxに指定した場合、デスクトップ版のWebブラウザでウィンドウ幅を600pxにしたのと同様の表示になります。

画面9　横幅：100％。ビューポート幅：デフォルト（980px）

画面10　横幅：100％。ビューポート幅：600px

画面11　横幅：100％。ビューポート幅：device-width（320px相当）

・ そのほかの設定項目

　ビューポートメタタグでは、横幅（width）以外の値も設定できます。height（高さ）や initial-scale（初期表示時の拡大率）などです。これらの内1つでも設定すれば、それに応じてWebブラウザが自動的にほかの値を計算してコンテンツを表示します。

3/4

INDEX
iPhone向けWebアプリを作ろう
	Page1 Safari Web Content Guide for iPhoneを読み解く iPhoneへの最適化とは、UIを最適化すること iPhone Human Interface Guidelines
	Page2 Safari Web Content Guide for iPhone ・ Web標準に対応 ・ 未対応の技術 ・ Webブラウザ判定 ・ フレームは避ける ・ 段組みやブロックを活用する ・ リソースの制約
	Page3 ・ ビューポートの設定 ・ メタタグ／リキッドレイアウトとビューポート設定
	Page4 ・ スタイルシート ・ iPhone内のほかの機能を呼び出すリンク デバッグ

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ