Bildschirmgrößen und Breakpoints

Windows Apps auf einer breiten Palette von Geräten ausgeführt werden, von Tablets und Laptops bis hin zu Desktops, großen Monitoren und Fernsehgeräten. Anstatt Ihre Benutzeroberfläche für jede Bildschirmgröße zu optimieren, entwerfen Sie sie für einige wichtige Breitenkategorien, die als Breakpoints bezeichnet werden:

  • Klein (unter 640 Pixel)
  • Mittel (641 Pixel bis 1007 Pixel)
  • Groß (1008 Pixel und mehr)

Tipp

Wenn Sie für bestimmte Haltepunkte entwerfen, entwerfen Sie den für Ihre App verfügbaren Bildschirmbereich (das Fenster der App) und nicht die physische Bildschirmgröße. Wenn Ihre App im Vollbildmodus ausgeführt wird, entspricht das App-Fenster der Bildschirmgröße. Wenn das nicht der Fall ist, ist das Fenster kleiner als der Bildschirm.

Breakpoints

Diese Tabelle beschreibt die verschiedenen Größenklassen und Breakpoints.

Haltepunkte für responsives Design

Größenklasse Breakpoints Typische Bildschirmgröße Geräte Fenstergrößen
Klein bis zu 640px 20" bis 65 Zoll Fernseher 480x854, 540x960
Medium 641 - 1007px 7" bis 12 Zoll Tablets 960 × 540
Groß 1008px und oben 13" und oben PCs, Laptops, Surface Hub 1024 × 640, 1366 × 768, 1920 × 1080

Warum werden TV-Geräte als „klein“ betrachtet?

Die meisten Fernseher sind physisch groß (40 bis 65 Zoll üblich) und haben hohe Auflösungen (HD oder 4K). Das Design für einen 1080p-Fernseher, den Sie von 10 Fuß entfernt sehen, unterscheidet sich jedoch von der Gestaltung für einen 1080p-Monitor auf Ihrem Schreibtisch. Wenn Sie die Entfernung der Anzeige berücksichtigen, sind die 1080 Pixel des Fernsehgeräts eher wie ein 540-Pixel-Monitor, der viel näher ist.

Das effektive Pixelsystem von XAML berechnet automatisch die Entfernung zur Anzeige. Wenn Sie eine Größe für ein Steuerelement oder einen Haltepunktbereich angeben, verwenden Sie effektive Pixel. Wenn Sie z. B. reaktionsfähigen Code für 1080 Pixel oder mehr erstellen, verwendet ein 1080p-Monitor diesen Code, aber ein Fernsehgerät von 1080 Pixeln nicht - obwohl das Fernsehgerät 1080 physische Pixel hat, hat er nur 540 effektive Pixel. Dies macht das Entwerfen für ein Fernsehgerät ähnlich dem Entwerfen für einen kleinen Bildschirm.

Effektive Pixelanzahl und Skalierungsfaktor

XAML passt UI-Elemente automatisch so an, dass sie auf Geräten und Bildschirmen aller Größen lesbar und leicht zu bedienen sind.

Wenn Ihre App auf einem Gerät ausgeführt wird, verwendet das System einen Algorithmus, um zu normalisieren, wie UI-Elemente auf dem Bildschirm angezeigt werden. Dieser Skalierungsalgorithmus berücksichtigt den Abstand und die Bildschirmdichte (Pixel pro Zoll), um die wahrgenommene Größe anstelle der physischen Größe zu optimieren. Der Algorithmus stellt sicher, dass eine Schrift von 24 Px auf einem großen Bildschirm 10 Fuß entfernt genauso lesbar ist wie eine Schrift von 24 Px auf einem kleinen Bildschirm ein paar Zoll entfernt.

Diagramm, das zeigt, wie Inhalte auf Geräten in unterschiedlichen Abständen unterschiedlich skaliert werden.

Wenn Sie Ihre XAML-App entwerfen, entwerfen Sie in effektiven Pixeln und nicht in tatsächlichen physischen Pixeln. Effektive Pixel (Epx) sind eine virtuelle Maßeinheit, die verwendet wird, um Layoutabmessungen und Abstände unabhängig von der Bildschirmdichte auszudrücken. (In unseren Richtlinien werden epx, ep und px synonym verwendet.)

Sie können die Pixeldichte und die tatsächliche Bildschirmauflösung beim Entwerfen ignorieren. Entwerfen Sie stattdessen die effektive Auflösung (die Auflösung in effektiven Pixeln) für eine Größenklasse.

Tipp

Wenn Sie Bildschirmmodells in Bildbearbeitungsprogrammen erstellen, legen Sie den DPI-Wert auf 72 fest, und legen Sie die Bildabmessungen auf die effektive Auflösung für die Gewünschte Größenklasse fest.

Vielfache von vier

Ein 4 Epx-Bild, das auf viele Dimensionen ohne Bruchpixel skaliert wird.

Die Größen, Ränder und Positionen von UI-Elementen sollten sich immer in Vielfachen von 4 Epx in Ihren XAML-Apps befinden.

XAML skaliert über einen Bereich von Geräten mit Skalierungsebenen von 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% und 400%. Die Basiseinheit ist 4, da sie als ganze Zahl auf diese Plateaus skaliert wird (z. B. 4 × 125% = 5, 4 × 150% = 6). Die Verwendung von Vielfachen von vier richtet alle Benutzeroberflächenelemente an ganzen Pixeln aus und sorgt für klare, scharfe Kanten. (Text hat diese Anforderung nicht; Text kann eine beliebige Größe und Position aufweisen.)

  • Last updated on