Richtlinien zum Skalieren auf die Pixeldichte

Artikel
05/15/2015

Windows-Runtime-Apps (die unter Windows, Windows Phone oder beiden Betriebssystemen ausgeführt werden) werden vom System automatisch skaliert, um unabhängig von der Pixeldichte eines Bildschirms die einheitliche Lesbarkeit und Funktionalität sicherzustellen. Befolgen Sie diese Richtlinien, damit die Qualität Ihrer App-UI beibehalten wird, wenn sie für Geräte mit unterschiedlichen Pixeldichten skaliert wird.

Hinweis Diese Richtlinien gelten nicht für Windows Phone-Apps mit Silverlight. Eine Silverlight-spezifische Anleitung finden Sie unter Multi-resolution apps for Windows Phone 8.

Differenz der Pixeldichte zwischen einem Standard-Slate und einem HD-Slate

Beschreibung

Ohne Skalierung wird die physische Größe der Objekte auf dem Bildschirm kleiner, wenn sich die Pixeldichte eines Geräts erhöht. Wenn UI-Elemente sonst zu klein wären, um sie zu berühren, oder Text zu klein wäre, um ihn zu lesen, skaliert Windows Ihre App basierend auf den folgenden Skalierungsebenen:

Windows Store-Apps:

1,0 (100 %, wenn keine Skalierung angewendet wird)
1,4 (Skalierung auf 140 %)
1,8 (Skalierung auf 180 %)

Windows Phone Store-Apps:

1,0 (100 %, keine Skalierung)
1,4 (Skalierung auf 140 %)
2,4 (Skalierung auf 240%)

In Windows wird die Skalierungsebene anhand der Größe des physischen Bildschirms, der Bildschirmauflösung, des DPI-Werts des Bildschirms und des Formfaktors bestimmt. Wenn die Bildschirmspezifikationen einen bestimmten Grenzwert überschreiten, wird von Windows die nächsthöhere Skalierungsebene verwendet. Sie können ResolutionScale (Windows) oder RawPixelsPerViewPixel (Windows Phone) verwenden, um den Skalierungsfaktor zu bestimmen.

Ihre App wird vom System automatisch skaliert. Um sicherzustellen, dass Ihre UI unabhängig von der Pixeldichte des Geräts gut aussieht und funktioniert, sollten Sie die App mithilfe der folgenden Anleitung für die Skalierung vorbereiten.

Empfohlene und nicht empfohlene Vorgehensweisen

Verwenden Sie skalierbare Vektorgrafiken (Scalable Vector Graphics, SVG). Windows skaliert diese Formate automatisch ohne wahrnehmbare Artefakte. Verwenden Sie SVGs für JavaScript-Apps. Sie können in Apps mit C#, C++ oder Visual Basic Grafiken mit XAML-Definition verwenden.
Nutzen Sie das Laden von Ressourcen für Bitmapbilder im App-Paket, und stellen Sie für jeden Skalierungsfaktor ein separates Bild bereit. Fügen Sie den Skalierungsfaktor in den Namen der Bilddatei ein (z. B. Assets\Square7070Logo.scale-100.png). Beachten Sie, dass Windows automatisch das richtige Bild für die aktuelle Skalierung lädt. Unter Skalierung gemäß DPI – Beispiel wird veranschaulicht, wie Sie das Laden von Ressourcen für Bilder verwenden.

Informationen zu den Bildanforderungen für die App-Zertifizierung finden Sie unter Auswählen der App-Bilder. Ausführliche Informationen zu Benennungskonventionen finden Sie unter Schnellstart: Verwenden von Datei- oder Bildressourcen (Windows Store-Apps mit JavaScript und HTML) oder Schnellstart: Verwenden von Datei- oder Bildressourcen (Windows Store-Apps mit C#/VB/C++ und XAML).
Beim Erstellen von Ressourcen für unterschiedliche Skalierungsebenen:
- Vermeiden Sie es, Bitmapbilder mit 100 % zu entwerfen und dann per Skalierung manuell zu vergrößern. Auch bei Nutzung professioneller Bildprogramme führt dies häufig zu verschwommenen Darstellungen.
- Beachten Sie, dass das Herunterskalieren eines großen Bilds mit hoher Auflösung nicht immer zu einem sauberen, klaren Ergebnis führt. Wenn der Originalvektor nicht verfügbar ist, ist das manuelle Herunterskalieren einer Datei mit hoher Auflösung aber besser als das Heraufskalieren aus einer Datei mit niedriger Auflösung.
Wenn die App Bilder mithilfe von Code zur Laufzeit lädt (z. B. bei Verwendung von DirectX zum Erstellen der UI, nicht XAML oder HTML), sollten Sie ResolutionScale (Windows) oder RawPixelsPerViewPixel (Windows Phone) verwenden, um die Skalierung zu bestimmen und Bilder basierend auf dem Prozentsatz der Skalierung manuell zu laden.
Verwenden Sie die Thumbnail-APIs für Dateisystembilder. Mit den Miniaturansicht-APIs wird die Leistung optimiert, indem kleinere Versionen des Bilds zur Verwendung als Miniaturansicht zwischengespeichert werden. Ausführliche Informationen finden Sie unter Effizientes Zugreifen auf das Dateisystem.
Geben Sie Breite und Höhe der Bilder an, anstatt die automatische Größenanpassung zu verwenden, um zu verhindern, dass sich das Layout beim Laden größerer Bilder ändert.
Verwenden Sie typografische Rastereinheiten und Untereinheiten. Verwenden Sie die typografischen, durch ein Raster definierten Größen von 20 px für Rasterhaupteinheiten und 5 px für Rasterteileinheiten. So stellen Sie sicher, dass Pixel in Ihren Layouts nicht aufgrund von Rundungen verschoben werden. Bei Einheiten mit Größenangaben, die durch 5 px teilbar sind, werden die Pixel nicht gerundet.
Verwenden Sie für Remotewebbilder die Abfrage für die Auflösung von Medien. Wenn in Ihrer App JavaScript verwendet wird und Sie ein Remotewebbild haben, verwenden Sie das "CSS @media resolution-Medienfeature" mit der background-image-Eigenschaft, um Bilder zur Laufzeit zu ersetzen.
Verwenden Sie keine Bilder, deren Größe keinem Vielfachen von 5 px entspricht. Bei Einheiten, die nicht durch 5 px teilbar sind, kann es bei Skalierungen von 140 %, 180 % und 240 % zu Pixelverschiebungen kommen.

Richtlinien zum Skalieren auf die Pixeldichte

Beschreibung

Empfohlene und nicht empfohlene Vorgehensweisen

Verwandte Themen

Zusätzliche Ressourcen