キーコンセプト
以下の記事は、Tizen SDK Dev Guide にあるKey Concepts の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
キーコンセプト
複数の解像度向けにWebアプリケーションを作成する前に、次のW3CのWebコンテンツスケーリング基準に精通していることを確認してください。これは、Webアプリケーションを開発する際に考慮する必要があります。
viewportメタタグ- CSSメディアクエリ
viewportメタタグ
viewportはWebページのコンテンツを表示するアプリケーション領域を定義します。
Webブラウザではviewportのサイズがブラウザのウィンドウサイズに依存します。viewportがWebコンテンツのサイズよりも小さい場合、水平方向および垂直方向のスクロールバーがページナビゲーションのために表示されてます。ウェブブラウザのviewportはズーム機能をサポートしていません。ただし、モバイルWebブラウザではウィンドウのスクロールバーがなく、viewportはズーム機能をサポートしています。
多くのモバイルWebブラウザでW3Cviewportメタタグによってviewportのサイズとズームレベルをカスタマイズすることができます。このタグを使用すると、Webページの幅、高さ、初期スケール、スケール範囲を設定することができます。
Webアプリケーション開発でviewportメタタグを使用するには次の点に注意しなければなりません。
viewportメタタグに定義されているdevice-heightとdevice-widthは実際のデバイスの幅と高さとピクセル単位で同じではありません。viewportメタタグを使用すると、異なるデバイスのWebブラウザでは、異なるレイアウトのサイズとスケールで同じ内容を表示します。スケールはdevice pixel ratio (DPR)を用いて算出されます。
CSSメディアクエリ
W3C CSSメディアクエリは、アプリケーションのコンテンツごとに異なるCSSファイルを適用するために、特定のメディアの機能とタイプの条件を設定することができます。Webコンテンツのスケーリングでは、例えば、次のような目的でCSSメディアクエリを使用することができます。
- 画面の
dots per inch(DPI)の比率の基づいて使用する画像リソースを定義する - 画面幅に基づいて使用するCSSレイアウトを決定する
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
