画面のサイズとブレークポイント

Windowsアプリは、タブレットやノート PC からデスクトップ、大型モニター、テレビまで、さまざまなデバイスで実行されます。 画面サイズごとに UI を最適化するのではなく、ブレークポイントと呼ばれるいくつかの主要な幅カテゴリを設計 します。

• 小 (640px 未満)
• 中 (641px から 1007px)
• 大 (1008px 以上)

ブレークポイント

この表では、さまざまなサイズのクラスとブレークポイントについて説明します。

テレビが "小さい" と見なされるのはなぜですか?

ほとんどのテレビは物理的に大きく (40 ~ 65 インチが一般的)、高解像度 (HD または 4K) を備えている。 ただし、10 フィート離れた場所から見える 1080p テレビの設計は、デスク上の 1080p モニターの設計とは異なります。 視聴距離を考慮すると、テレビの 1080 ピクセルは、はるかに近い 540 ピクセルのモニターに似ています。

XAML の有効ピクセル システムは、距離を自動的に表示します。 コントロールまたはブレークポイントの範囲のサイズを指定する場合は、 有効な ピクセルを使用します。 たとえば、1080 ピクセル以上のレスポンシブ コードを作成した場合、1080p モニターではそのコードが使用されますが、1080p テレビでは使用されません。テレビには 1080 の物理ピクセルがありますが、有効なピクセル数は 540 ピクセルしかないためです。 これにより、テレビの設計は、小さな画面の設計に似ています。

有効ピクセルとスケール ファクター

XAML では、UI 要素が読みやすく、すべてのデバイスと画面サイズで操作しやすいように自動的に調整されます。

アプリがデバイス上で実行されると、システムはアルゴリズムを使用して、UI 要素が画面に表示される方法を正規化します。 このスケーリング アルゴリズムでは、表示距離と画面密度 (ピクセル/インチ) を考慮して、物理サイズではなく、認識されるサイズに合わせて最適化します。 このアルゴリズムにより、10 フィート離れた大画面の 24 px フォントは、数インチ離れた小さな画面の 24 px フォントと同じくらい読みやすくなります。

XAML アプリを設計するときは、実際の物理ピクセルではなく、有効なピクセル単位で設計します。 有効ピクセル (epx) は、画面密度に関係なく、レイアウトの寸法と間隔を表すために使用される仮想単位です。 (このガイドラインでは、epx、ep、px は同じ意味で使用されています)。

ピクセル密度と実際の画面解像度は、デザイン時に無視できます。 代わりに、サイズ クラスの有効解像度 (有効ピクセル単位の解像度) を設計します。

4 の倍数

UI 要素のサイズ、余白、位置は、XAML アプリでは常に 4 epx の倍数にする必要があります。

XAML は、100%、125%、150%、175%、200%、225%、250%、300%、350%、400% のスケーリングプラトーを持つさまざまなデバイス間でスケーリングします。 ベースユニットは整数としてこれらのプラトーにスケーリングされるため、4 です (たとえば、4 × 125% = 5、4 × 150% = 6)。 4 つの倍数を使用すると、すべての UI 要素がピクセル全体に揃え、鮮明でシャープなエッジが保証されます。 (テキストにはこの要件はありません。テキストには任意のサイズと位置を指定できます)。

関連トピック

• Fluent Design - レイアウト
• レスポンシブ デザイン
• XAML でのレスポンシブ レイアウト
• XAML コントロール