.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 comment(-) trackback(-)
.20 2012

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

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

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

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

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

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

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

Mobile_Safari_iPhone_P.png

Mobile_Safari_iPhone_L.png

■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月現在)

safari_ipad2-1-1.png


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を知る」
第一回目の今日は、その画面領域についてお送りいたしました。
次回は、スタンドアロンモードについて学んでいきます。

それではまた。

関連記事
スポンサーサイト

Comment

Post comment

  • comment
  • secret
  • 管理者にだけ表示を許可する

Trackback

trackbackURL:http://appteam.blog114.fc2.com/tb.php/236-043156b1

ブログ内検索

関連リンク

製品情報

最新記事

カテゴリ

プロフィール

neoxneo



NEXT-SYSTEM iOS Developers Blog


  • UTO:
    カナダ版iPhone4Sは、マナーモードでシャッター音がならない…


  • Ehara:
    ...


  • Hayate:
    ...


  • Tasaki:
    Developer登録完了...したのはいいけど


  • Ueda:
    ...



リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。