画面表示関係
2009-08-09 (日) 20:19:00 (213d)

lifebuoy.png iPhone/iPod touchのMobileSafariの画面表示系情報のまとめ

iPhoneの描画エリア 　

  • 基本的な画面サイズ
    • iPhoneの画面サイズは、320pixel*480pixel。このうち上部のステータスバー（アンテナ、電池残量など）に20pixel要するため、実質描画エリアのサイズは320pixel*460pixel。
    • ただし、JavaScriptで取れるscreen.width、screen.heightに対しては、320pixel、396pixelが返ってきます。
  • キーボードを考慮したサイズ
    • 画面上部にステータスバー（20pixel）とURLバー（60pixel）、画面下部にはフォームアシスタントバー（44pixel）とキーボード（216pixel/162pixel）が表示されるため、キーボード未表示で320*356pixel、キーボード表示時には320*140pixelしか利用できない。

Viewport設定 　

Viewportの指定について 　

  • iPhone/iPod touchの画面サイズに合わせた表示を行い、無駄なスクロール処理をなくすことにより、タッチ動作などの特有のUIが活きてきます。必ずピッタリサイズを指定するようにしましょう。
  • 下記のように、widthは自分のサイトの”水平スクロールバーでない最小幅”を設定します。※iPhone画面サイズに最適化後のサイズ。
  • この時、画像やtableなどでのsize指定があるとiPhoneで縮小表示になってしまいます。出来る限り直接サイズ指定をはずすのがコツになります。preタグなども要注意です。

    <meta name="viewport" content="width=480" />

  • また、↓のように、「user-scalable」を設定することでユーザー側でのピンチアウト操作を禁止することもできます。

    <meta name="viewport" content="width=320, user-scalable=no" />

Viewportプロパティ 　

widthページロード時の横幅で標準値は980。利用可能範囲は200～10,000。iPhone専用であれば、320がピッタリのサイズ。
heightページロード時の縦幅で標準値は横幅の数値に対するアスペクト比によって設定される。利用可能範囲は223～10000
initial-scaleページロード時のスケール値。標準値はスクリーンのサイズと同じ。利用可能範囲は[minimum-scale、maximum-scale]。ユーザは“ピンチ”および“ダブルタップ”でズーム値を変更可能
user-scalableユーザのズーム動作の制御。“No”にするとズーム機能をoffにできる。標準値は“yes”
minimum-scaleズーム機能を利用する際の最小スケール倍率。標準値は0.25。利用可能範囲は0～10
maximum-scaleズーム機能を利用する際の最大スケール倍率。標準値は1.6。利用可能範囲は0～10

iUiフレームワークを使う時のViewport設定の例 　

  • initial-scale=1.0; maximum-scale=1.0;を指定しないとスクロールの際に画面が崩れる場合があります。

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

WEBクリップアイコンの指定 　

Webクリップアイコンについて 　

  • iPhone/iPod touchでは、ホーム画面と呼ばれる通常アプリアイコンが並ぶ画面に「Webクリップ」と呼ばれるWebページのリンク（ショートカット）を設置することが出来ます。
  • これはそのWebクリップのアイコンを指定するもので、faviconに相当します。
  • Webサイトのルートに、"apple-touch-icon.png"というファイル名のアイコンを置いておくだけでも反応するのですが、より正確を期す場合はHEAD内への記述が望ましいでしょう。
  • PNGファイルのみ可能です。大きさは57pixel*57pixelがピッタリサイズなのですが、Yahooやアップルなどは129pixel*129pixel程度に作っておき、高精度のアイコン表示を行っています。なお、角丸やテカリ処理はiPhone側で自動で行ってくれます。

書式など 　

  • ホーム画面のアイコンを指定する書式は次の通りです。Webクリップは1.1.3以降のみ有効です。

    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />

  • 2.0以降では、「apple-touch-icon-precomposed.png」名で指定することにより、角丸やテカリ処理を行わなくなります。

    <link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png" />

フォント関係 　

フォント指定 　

  • フォントも直接指定する方が望ましいでしょう。特に日本語フォントはヒラギノフォントを指定しておきましょう。

    font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";

-webkit-text-size-adjust 　

  • iPhoneのMobileSafariは勝手にフォントサイズ調整をしようとする。これが原因で画面を縦横にした際に不要に小さくなる場合がある。
    • -webkit-text-size-adjust:none で切ることが出来る。 
      <body style=”-webkit-text-size-adjust:none”>
<table style=”-webkit-text-size-adjust:auto”>
<div style=”-webkit-text-size-adjust:200%”>

邪魔な表示を消す 　

URL&検索バーを消す 　

  • window.scrollTo(0,1)すれば消えますが、タイミングとドラッグに注意しないと起動直後の指定では無効になる場合があります。
  • また、画面サイズが小さいなどスクロールが発生しない状態では、URL&検索バーを消すことはできません。その場合にはheight属性を指定することで画面サイズを調整しましょう。
  • 下記のようにSetTimeout?を使って100ミリ秒後にscrollToさせるなどの指定が必要です。

    setTimeout(scrollTo, 100, 0, 1);

フルスクリーンモードにする 　

  • MobileSafariには、画面下部に「前後ページ移動」、「ブックマーク追加」、「ブックマーク呼び出し」などが搭載されたツールバーが常時表示されています。
  • 次の記述をした上で、Webクリップしたアイコンから起動することにより、このツールバーを非表示にすることが可能です。※iPhone2.1以降のみ。
  • ただし、フルスクリーンモードにした場合、「onOrientationChange?」イベントが発生しないという制限があります。

    <meta name="apple-mobile-web-app-capable" content="yes" />

  • フルスクリーンモードは、「window.navigator.standalone」で判定（ReadOnly?）できます。

ステータスバーを黒または半透明にする 　

  • フルスクリーンモードにおいて、MobileSafariの画面上部にある「キャリア表示」、「時計」が表示されているステータスバーも黒または半透明にすることが可能です。※iPhone2.1以降のみ。
  • 次の記述をした上で、Webクリップしたアイコンから起動することにより、このステータスバーが黒または半透明になります。なお、半透明にした時に限り、コンテンツレイヤーとステータスバーが重なって表示されます。

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />　：半透明

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />　：黒




スポンサード　リンク