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

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

UIスケーラビリティ

Dev Guide

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

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

UIスケーラビリティ

UIスケーラビリティにより、ひとつのTizen Webアプリケーションで複数の画面解像度をサポートすることができます。Tizenプラットフォームは実行時に、アプリケーションの論理的な解像度で定義されたサイズと位置の値を物理的な解像度に自動的に変換します。TizenのWeb UIフレームワークはデバイスの画面にWebページに収まるようにW3Cviewportメタタグを使用し、TizenのWeb UIウィジェットのサイズを決定するためにrem単位を使用します。

viewportの設定

Tizenデバイスは様々な画面解像度とdots per inch (DPI)をサポートします。viewportメタタグが定義されていない場合、Tizen UIフレームワークは、デフォルトのviewportの幅とスケール係数を使用します。これにより、Webコンテンツのレイアウトが異なる画面解像度との間で変化することを保証します。

次の例では、viewportの幅がdevice-width(デバイスの幅により確定)に設定されています。device-widthの値は、同様の仮想DPI値を設定し、同じような物理的なサイズのすべてのデバイスでウィジェットを表示するために取得されます。 （viewportの値が定義されていない場合、TizenのWeb UIフレームワークはこの例にある値をデフォルトで使用します。）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

viewport幅がdevice-widthに設定されている場合、幅とスケール係数の値はDPIによってWebブラウザによって計算されます。

  1. Tizenデバイスに基づき、あらかじめ定義されたデバイスDPI値が選択されます。

    low-dpi medium-dpi high-dpi extrahigh-dpi
    120 160 240 320

  2. device pixel ratio (DPR) は次の式により計算されます。

    DPR = device-DPI / medium-DPI

  3. viewportの幅は次の式により計算されます。

    Viewport width = (Real device width) / DPR

  4. スケール係数は次の式により計算されます。

    Scale factor = (Given scale value) * DPR

    デフォルトのスケール値は1.0です。

次の図は、異なるTizenデバイスのデバイスDPI値を示しています。

図：デバイスDPIの値

device-DPI

次の表は、viewport幅がdevice-widthに設定された異なるデバイス上で、TizenのWebサイト（http://tizen.org）の異なるレイアウトのサイズとスケール係数を示しています。

<meta name="viewport" content="width=device-width, initial-scale=1">

表：レイアウトのサイズとスケール係数
Device screen resolution Real screen DPI Device DPI Web browser page Viewport width Scale factor
720 x 1280 306 320 captured screen1 360 px 2.0
480 x 800 218 240 captured screen2 320 px 1.5

Tizen Web Winsets との連携

Tizen Web winsets（ポップアップ、タブバー、ColorPickerなど）のデフォルトサイズは、参照viewportのDPIの値が160に基づいて設計されています。したがって、viewportの幅がdevice-widthに設定されていれば、これらのwinsetsはどのTizenデバイスでも同様のサイズになります。

アプリケーションのviewportの幅を手動で固定値に設定すると、Tizen Web winsetsはアプリケーションで適切にフィットしない場合があります。この問題を回避するためにTizen Web winsetsはrem単位を使用します。rem単位はwinsetのベースフォントサイズに依存します。それぞれのTizen Web winsetは独自のベースフォントサイズを持ち、<html>要素のフォントサイズもそのベースフォントサイズに設定されます。viewportの幅が固定値に設定された場合は、このベースフォントサイズは再計算されてTizen Web winsetのサイズに正確に調整するように<html>要素のフォントサイズが設定されます。

次に読むドキュメント

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

日本語訳： yasuyk

http://www.softolet.com

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