Bildschirmgrößen und BreakpointsScreen sizes and breakpoints

UWP-Apps können auf jedem Gerät mit Windows 10 ausgeführt werden – z. B. Telefone, Tablets, Desktops, Fernseher und mehr.UWP apps can run on any device running Windows 10, which includes phones, tablets, desktops, TVs, and more. Bei einer großen Anzahl von Geräte Zielen und Bildschirmgrößen im Windows 10-Ökosystem sollten Sie nicht die Benutzeroberfläche für jedes Gerät optimieren, sondern für einige Schlüsselkategorien (auch als "Breakpoints" bezeichnet) entwerfen:With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called "breakpoints"):

  • Klein (kleiner als 640 Pixel)Small (smaller than 640px)
  • Mittel (641 Pixel bis 1007 Pixel)Medium (641px to 1007px)
  • Groß (1008 Pixel und größer)Large (1008px and larger)

Tipp

Beim Entwerfen für bestimmte Breakpoints sollten Sie den für Ihre App verfügbaren Bildschirmbereich (App-Fenster) berücksichtigen, nicht die Bildschirmgröße.When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window), not the screen size. Wenn die App im Vollbildmodus läuft, hat das App-Fenster die gleiche Größe wie der Bildschirm, aber wenn die App nicht im Vollbildmodus ist, ist das Fenster kleiner als der Bildschirm.When the app is running full-screen, the app window is the same size as the screen, but when the app is not full-screen, the window is smaller than the screen.

BreakpointsBreakpoints

Diese Tabelle beschreibt die verschiedenen Größenklassen und Breakpoints.This table describes the different size classes and breakpoints.

Reaktionsfähige Designbreakpoints

GrößenklasseSize class BreakpointsBreakpoints Typische Bildschirmgröße (diagonal)Typical screen size (diagonal) GeräteDevices FenstergrößenWindow sizes
KleinSmall 640 Pixel oder weniger640px or less 4" bis 6"; 20" bis 65"4" to 6"; 20" to 65" Smartphones, TV-GerätePhones, TVs 320 x 569, 360 x 640, 480 x 854320x569, 360x640, 480x854
MittelMedium 641 Pixel bis 1007 Pixel641px to 1007px 7" bis 12"7" to 12" Phablets, TabletsPhablets, tablets 960 x 540960x540
GroßLarge 1008 Pixel oder mehr1008px or greater 13" und größer13" and larger PCs, Laptops, Surface HubsPCs, laptops, Surface Hubs 1024 x 640, 1366 x 768, 1920 x 10801024x640, 1366x768, 1920x1080

Warum stehen TV-Geräte unter „klein”?Why are TVs considered "small"?

Obwohl die meisten TV-Geräte physisch ziemlich groß sind (40 bis 65 Zoll sind üblich) und hohe Auflösungen haben (HD oder 4k), unterscheidet sich das Entwerfen für ein 1080P-TV-Gerät, das Sie aus 3 Meter Abstand betrachten, vom Entwerfen für einem 1080p-Monitor auf Ihrem Schreibtisch.While most TVs are physically quite large (40 to 65 inches is common) and have high resolutions (HD or 4k), designing for a 1080P TV that you view from 10 feet away is different from designing for a 1080p monitor sitting a foot away on your desk. Wenn Sie den Abstand berücksichtigen, entsprechen die 1080-Pixel des TV-Geräts eher einem 540-Pixel-Monitor, der viel näher steht.When you account for distance, the TV's 1080 pixels are more like a 540-pixel monitor that's much closer.

Das UWP-System effektiver Pixel berücksichtigt den Betrachtungsabstand automatisch.UWP's effective pixel system automatically takes viewing distance in account for you. Wenn Sie eine Größe für ein Steuerelement oder einen Breakpointbereich angeben, verwenden Sie dabei automatisch „effektive” Pixel.When you specify a size for a control or a breakpoint range, you're actually using "effective" pixels. Wenn Sie beispielsweise einen reaktionsfähigen Code für 1080 Pixel und mehr erstellen, wird ein 1080-Monitor diesen Code verwenden, ein 1080p-Fernsehgerät jedoch nicht, denn obwohl ein 1080p-Fernsehgerät 1080 physische Pixel besitzt, hat es nur 540 effektive Pixel.For example, if you create responsive code for 1080 pixels and higher, a 1080 monitor will use that code, but a 1080p TV will not--because although a 1080p TV has 1080 physical pixels, it only has 540 effective pixels. Dadurch entspricht das Entwerfen für ein Fernsehgerät dem Entwerfen für ein Smartphone.Which makes designing for a TV similar to designing for a phone.

Effektive Pixel und SkalierungsfaktorEffective pixels and scale factor

UWP-Apps skalieren Ihre Benutzeroberfläche automatisch, um sicherzustellen, dass Ihre Anwendung auf allen Windows 10-Geräten lesbar ist.UWP apps automatically scale your UI to guarantee that your app will be legible on all Windows 10 devices. Windows wählt automatisch einen Skalierungsfaktor für jede Anzeige aus, basierend auf dem DPI-Wert (Punkte pro Zoll) und dem Betrachtungsabstand des Geräts.Windows automatically scales for each display based on its DPI (dots-per-inch) and the viewing distance of the device. Benutzer können den Standardwert überschreiben, indem Sie auf Einstellungen > Anzeige > Skalierung und Layout-Einstellungsseite wechseln.Users can override the default value and by going to Settings > Display > Scale and layout settings page.

Allgemeine EmpfehlungenGeneral recommendations

KleinSmall

  • Legen Sie den linken und den rechten Fensterrand auf 12px fest, um eine visuelle Trennung zwischen dem linken und dem rechten Rand des App-Fensters zu erzielen.Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window.
  • Docken Sie App-Leisten für bessere Erreichbarkeit am unteren Fensterrand an.Dock app bars to the bottom of the window for improved reachability.
  • Verwenden Sie jeweils eine Spalte/Region.Use one column/region at a time.
  • Verwenden Sie ein Symbol zum Darstellen der Suche (kein Suchfeld anzeigen).Use an icon to represent search (don't show a search box).
  • Verwenden Sie den Navigationsbereich im Überlagerungsmodus, um Platz auf dem Bildschirm zu sparen.Put the navigation pane in overlay mode to conserve screen space.
  • Verwenden Sie für das Master/Details-Modell den gestapelten Darstellungsmodus, um Platz auf dem Bildschirm zu sparen.If you're using the master details pattern, use the stacked presentation mode to save screen space.

MittelMedium

  • Legen Sie den linken und den rechten Fensterrand auf 24px fest, um eine visuelle Trennung zwischen dem linken und dem rechten Rand des App-Fensters zu erzielen.Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Positionieren Sie Elemente wie App-Leisten am oberen Rand des App-Fensters.Put command elements like app bars at the top of the app window.
  • Verwenden Sie bis zu zwei Spalten/Regionen.Use up to two columns/regions.
  • Zeigen Sie das Suchfeld an.Show the search box.
  • Legen Sie für Navigationsleiste den Streifenmodus fest, sodass immer ein schmaler Streifen mit Symbolen angezeigt wird.Put the navigation pane into sliver mode so a narrow strip of icons always shows.
  • Ziehen Sie weitere Anpassungen für TV-Umgebungen in Erwägung.Consider further tailoring for TV experiences.

GroßLarge

  • Legen Sie den linken und den rechten Fensterrand auf 24px fest, um eine visuelle Trennung zwischen dem linken und dem rechten Rand des App-Fensters zu erzielen.Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Positionieren Sie Elemente wie App-Leisten am oberen Rand des App-Fensters.Put command elements like app bars at the top of the app window.
  • Verwenden Sie bis zu drei Spalten/Regionen.Use up to three columns/regions.
  • Zeigen Sie das Suchfeld an.Show the search box.
  • Platzieren Sie den Navigationsbereich im angedockten Modus so, dass er immer angezeigt wird.Put the navigation pane into docked mode so that it always shows.

Tipp

Mit Continuum für Smartphoneskönnen Benutzer kompatible Windows 10 Mobile-Geräte mit einem Monitor, einer Maus und Tastatur verbinden, damit ihre Telefone wie Laptops funktionieren.With Continuum for Phones, users can connect compatible Windows 10 mobile devices to a monitor, mouse and keyboard to make their phones work like laptops. Berücksichtigen Sie diese neue Funktion beim Entwerfen für bestimmte Breakpoints – ein Mobiltelefon bleibt nicht immer in einer Klasse mit geringer Größe.Keep this new capability in mind when designing for specific breakpoints - a mobile phone will not always stay in the size class.