Mobile Safariを知る 〜 第一回 画面領域

みなさん、こんばんは
hayateです

Mobile Safariを知る
第一回目の今日は、その画面領域に迫りたいと思います。

我々の生活の一部と言っても過言ではないMobile Safari。
PC用ブラウザの延長として使うだけでは見えてこない様々な仕様があります。
その中でも今日は、Webコンテンツ制作者には欠かせないその画面領域について
皆さんと学んでいきたいと思います。

さて、Mobile Safariと一言で言ってもその実態は大きく２種類に分類されます。
・iPhone、iPod touchに搭載されているのもの（320pt×480ptベース）
・iPadに搭載されているもの（1024pt×768ptベース）
この２種類です。

まずはiPhoneのMobile Safariの画面領域からみていきましょう。
以下のとおりです。

※以下、サイズの単位はポイントです。
ピクセル換算するとRetinaディスプレイでは２倍となります。





■iPhone UIサイズ

向き	Portrait	Landscape
ステータスバー	20	20
ステータスバー(電話中)	40	40
アドレスバー	60	60
ツールバー	44	32

そして、コンテンツ領域は以下のとおりです。

■iPhone コンテンツ領域

向き	Portrait	Landscape
アドレスバー表示時	320 x 356	480 x 208
アドレスバー非表示時	320 x 416	480 x 268

次に、iPadのUIサイズとコンテンツ領域ですが
iPad版のMobile SafariはiOS4.3からiOS5へのバージョンアップ時にUI構成が変化しました。
タブバーの追加です。これによりコンテンツ領域のサイズが変わっています。

先日行われたWWDCやインターネット上の情報では、iOS4系の使用者はまだ約20％ほど存在するようですので、今回はiOS5.x系とiOS4.3を対象としましょう。（※2012年6月現在）




iPad UIサイズ

	iOS 5	iOS 4.3
ステータスバー	20	20
ツールバー	44	58
ブックマークバー	28	30
タブバー	32	-

iPad コンテンツ領域

	iOS 5		iOS 4.3
向き	Landscape	Portrait	Landscape	Portrait
ブックマークバー 非表示時	1024 x 672	768 x 928	1024 x 690	768 x 946
ブックマークバー 表示時	1024 x 644	768 x 900	1024 x 660	768 x 916

こうして見てみると、意外とコントロール部分が大きな割合を占めていること、
そして、ユーザの使い方によってコンテンツ領域が変化することがわかります。

このため、Webアプリをネイティブアプリ風に制作する場合、高さの変化に対応できるように
レイアウトを考慮する必要があります。

こうした問題の解決策としてAppleはスタンドアロンモードと呼ばれるものを用意しています。
これについては次回とりあげたいと思います。

さて、いかがでしたでしょうか。
「Mobile Safariを知る」
第一回目の今日は、その画面領域についてお送りいたしました。
次回は、スタンドアロンモードについて学んでいきます。

それではまた。