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

Windows アプリは、タブレット、デスクトップ、テレビなど、Windows を実行している任意のデバイスで実行できます。 Windows エコシステム全体に膨大な数のデバイス ターゲットと画面サイズがあり、各デバイスの UI を最適化するのではなく、いくつかの主要な幅カテゴリ ("ブレークポイント" とも呼ばれます) を設計することをお勧めします。

• 小 (640 ピクセル以下)
• 中 (641 ピクセル ～ 1007 ピクセル)
• 大 (1008 ピクセル以上)

ブレークポイント

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

なぜテレビは「小さい」と見なされるのですか。

ほとんどのテレビは物理的に非常に大きく (40 から 65 インチが一般的)、高解像度 (HD または 4K) ですが、10 フィート (約 3 m) 離れた場所から表示する 1080P のテレビの設計は、机上の 1 フィート (約 30 cm) 離れた場所に置かれる 1080p のモニターの設計とは異なります。 距離を考慮するときに、テレビの 1080 ピクセルは 540 ピクセルのモニターにより近くなります。

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

有効ピクセルと倍率

XAML は、すべてのデバイスと画面サイズで読みやすく、操作しやすい UI 要素を自動的に調整することで役立ちます。

デバイスでアプリを実行するとき、システムでは、UI 要素を画面に表示する方法を正規化するアルゴリズムを使います。 このスケーリング アルゴリズムでは、視聴距離と画面の密度 (ピクセル/インチ) を考慮して、体感的なサイズを最適化します (物理的なサイズではありません)。 スケーリング アルゴリズムによって、10 フィート離れた Surface Hub における 24 ピクセルのフォントが、数インチ離れた 5 インチ サイズの電話における 24 ピクセルのフォントと同じようにユーザーに読みやすい状態で表示されます。

スケーリング システムのしくみにより、XAML アプリを設計するときに、実際の物理ピクセルではなく、有効なピクセル単位で設計します。 有効ピクセル (epx) は仮想的な測定単位で、画面の密度とは無関係にレイアウトのサイズと間隔を表すために使用されます。 (ガイドラインでは、epx、ep、および px を区別しないで使用しています。)

設計時には、ピクセル密度と実際の画面解像度を無視できます。 その代わり、サイズ クラスの有効な解像度 (有効ピクセル単位の解像度) が向上するように設計します (詳しくは、「画面のサイズとブレークポイント」をご覧ください)。

4 の倍数

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

XAML は、100%、125%、150%、175%、200%、225%、250%、300%、350%、400%のスケーリングプラトーを持つさまざまなデバイスでスケーリングされます。 基本単位は 4 になりますが、これは、これらのプラトーに整数としてスケーリングできるためです (例: 4 x 125% = 5、4 x 150% = 6)。 4 の倍数の使用によってすべての UI 要素のピクセル全体が整列し、UI 要素のエッジがすっきりとシャープになります (この要件はテキストには適用されません。テキストのサイズと位置に制限はありません)。