TIZENアプリ開発研究ブログ 興味しんしんドリーム

このブログはTIZENアプリ開発情報を実践して情報を共有する為のブログです。

複数画面をサポートしたアプリケーションの作成

Dev Guide

以下の記事は、Tizen SDK Dev Guide にあるMultiple Screen Support Guide の日本語訳です。

その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。

複数画面をサポートしたアプリケーションの作成

複数の画面サイズをサポートするアプリケーションを作成するには、アプリケーションのコーディングのときに次の点を考慮する必要があります。

  • viewportの設定
  • リソースの最適化
  • 画面解像度に依存しないUIの作成

viewportの設定

IDEでWebアプリケーションプロジェクトを作成するときにアプリケーションのUIのスケーラビリティを使用するには、viewportメタタグを設定します。 Tizen Webアプリケーションでviewportを設定するには、index.htmlファイルのセクションにviewportメタタグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

リソースの最適化

デフォルトでは、TizenのWeb UIフレームワークはHD Web winsetsで構成されています。Winsetのスケールは、解像度の低いデバイスに合わせて低くなります。異なる画面解像度やデバイスにリソースを最適化するには、Tizenで利用できるさまざまな解像度に対してCSSメディアクエリを使用します。HTMLやCSSファイルでCSSメディアクエリを使用できます。

HTMLファイル

<link media="only screen and (min-resolution: 320dpi)" href="high-quality-images.css" type= "text/css" rel="stylesheet">

CSSファイル

@media screen and (max-resolution: 159dpi)
{
   // Set styles
}

@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
{
   // Set styles
}

@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
{
   // Set styles
}

@media screen and (min-resolution: 320dpi)
{
   // Set styles
}

また、CSSファイルで縦向きや横向き用に対して異なるレイアウトとリソースを設定できます。

@media screen and (orientation: portrait)
{
   // Set styles
}

@media screen and (orientation: landscape)
{
   // Set styles
}

画面解像度に依存しないUIの作成

Tizenのベースフォントサイズは18ピクセルです。このベースフォントサイズの値はデバイスの画面解像度によって変わります。しかし、画面解像度に依存しないUIを作成するために、Webブラウザエンジンは物理的な画素サイズの代わりに論理画素サイズとしてベースフォントサイズをレンダリングします。

次に読むドキュメント

複数スクリーンのサポートガイド

日本語訳： yasuyk

http://www.softolet.com

Creative Commons License This content is licensed under Creative Commons Attribution 3.0. For details, see the Content License.