Safari Web Content Guide for iPhoneを読み解く

iPhone向けWebアプリを作ろう


ソシオメディア株式会社
上野学
2008/5/29

ビューポートの設定

- PR -

 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 フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間