Anpassen von Websites an unterschiedliche Fenstergrößen

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

Anpassen von Websites an unterschiedliche Fenstergrößen

  • Comments 0

IE10 in der Windows 8 Release Preview unterstützt die Eigenschaften „width“ und „height“ des W3C-Entwurfs CSS-Geräteanpassung. Hierdurch können Webentwickler die automatische Skalierung von Inhalten für unterschiedliche Fenstergrößen einfach steuern. Genauer gesagt ermöglicht dies, Websites einfach für die angedockte Ansicht und das Hochformat von Metro-Stil-Browsern für Windows 8 anzupassen.

Automatisches Skalieren und Verwendung dieser Funktion

Die meisten Websites sind auf Fenster mit einer Breite von 1024 Pixeln ausgelegt. Dies stellt bei maximiertem Browserfenster eine optimale Anzeige auf vielen Bildschirmen sicher. Jedoch werden Websites auf neuen Geräten, beispielsweise Tablets, sowie in der Hochformatansicht nicht richtig angezeigt, wenn sie nicht auch für andere Fenstergrößen optimiert wurden. In diesem Fall werden Inhalte oft nicht vollständig angezeigt oder das Layout beeinträchtigt.

Screenshot der TechCrunch-Website in einem besonders schmalen Fenster. Nur die Inhalte im linken Bereich der Website werden angezeigt.Screenshot der Wikipedia-Website in einem besonders schmalen Fenster. Die linke Navigationsleiste wird angezeigt, der Artikel des Tages ist nur in einer sehr schmalen Spalte mit zahlreichen Zeilenumbrüchen lesbar.
TechCrunch und Wikipedia in besonders schmalen Fenstern

Dieses schmale Layout ist in Windows 8 besonders wichtig, da es in der angedockten Ansicht des Metro-Stil-Browsers zur Anwendung kommt. Dieselbe Situation liegt auch bei der Hochformatansicht auf Slates vor, da hier kleinere Bildschirme verwendet werden.

Im Metro-Stil-Browser erfolgt das automatische Skalieren der angedockten Ansicht und der Hochformatansicht standardmäßig, um eine Layout-Breite von mindestens 1024 Pixeln sicherzustellen. Mobilgeräte nutzen einen vergleichbaren Ansatz, um nicht für Mobilgeräte optimierte Websites auf kleinen Bildschirmen anzuzeigen. Da die meisten Websites auf 1024 Pixel ausgelegt sind, wird so sichergestellt, dass weder das Layout beeinträchtigt noch Inhalte standardmäßig abgeschnitten werden.

Screenshot der TechCrunch-Website in der angedockten Ansicht eines Metro-Stil-Browsers. Das vollständige Layout der Seite mit einer Breite von 1024 Pixel ist sichtbar und wurde entsprechend verkleinert.Screenshot der Wikipedia-Website in der angedockten Ansicht eines Metro-Stil-Browsers. Das vollständige Layout der Seite mit einer Breite von 1024 Pixel ist sichtbar und wurde entsprechend verkleinert.
TechCrunch und Wikipedia im Metro-Stil-Browser unter Windows 8 in der angedockten Ansicht.

Obwohl dieser Ansatz eine gute Standardansicht sicherstellt, müssen Benutzer zoomen, um den Inhalt der Website zu lesen, Eingaben vorzunehmen usw.

Gute Ergebnisse in schmalen Fenstern

Die besten schmalen Layouts wurden von Webentwicklern spezifisch entwickelt. Zusätzlich dazu, dass die Website in einem kleineren Bereich angezeigt werden muss, sind möglicherweise auch das Ändern von Bildgrößen, das Neuanordnen von Inhalten, das Bereitstellen alternativer Tools für die Websitenavigation oder andere grundlegende Änderungen an den Inhalten erforderlich.

Wenn Sie Ihre Website bereits für schmale Fenster angepasst haben, kann die Standardskalierung mithilfe der Geräteanpassung überschrieben werden.

Hervorragende Beispiele für angepasste Layouts finden Sie bei Media Queries. Bei Metal Toad Media finden Sie außerdem einen guten Artikel zur Unterstützung der Layoutbreite, der sich mit verbreiteten Geräten und Bildschirmgrößen befasst.

Verwenden von @-ms-viewport

Einfache Unterstützung für die angedockte Ansicht. Wenn Ihre Website bereits für eine Breite von 320 Pixeln geeignet ist, können Sie diese Version einfach für die angedockte Ansicht verwenden. Die Kombination der Geräteanpassung mit CSS-Medienabfragen ermöglicht das selektive Überschreiben der Funktion für die automatische Skalierung. Dieses CSS überschreibt die standardmäßige automatische Skalierung und erzwingt stattdessen ein 320-Pixel-Layout für alle Fenster mit einer Breite von bis zu 320 Pixeln.

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

Der Inhalt wird entsprechend verkleinert, wenn das Fenster weniger als 320 Pixel breit ist. Beispielsweise werden Inhalte in einem Fenster mit 300 Pixeln mit 93,75 % ihrer ursprünglichen Größe angezeigt. Ist das Fenster größer, wird die normale Skalierung von IE10 verwendet (beispielsweise, wenn der Metro-Stil-Browser in der Hochformatansicht verwendet wird).

Die Geräteanpassung verursacht in Browsern, die diese noch nicht unterstützen, keinerlei Beeinträchtigungen. Diese Browser können trotzdem von der Unterstützung für schmale Layouts profitieren – lediglich werden die Inhalte nicht entsprechend der Fenstergröße skaliert.

Unterstützung für die Hochformatansicht. Wenn Ihre Website außerdem ein Layout mit einer Breite von 768 Pixeln unterstützt, kann die Unterstützung für die Hochformatansicht einfach durch eine zweite Viewport-Regel hinzugefügt werden:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

 

@media screen and (min-width: 768px) and (max-width: 959px) {

@-ms-viewport { width: 768px; }

}

Wir empfehlen, Websites zusätzlich zu einer Layout-Breite von 1024 Pixeln und mehr (Querformatansicht) mit 768 Pixeln (das Hochformat der meisten Slates) sowie 320 Pixeln (angedockte Ansicht im Metro-Stil-Browser) zu testen. Ein Beispiel für die Verwendung der Viewport-Regel finden Sie in der Make it Snappy!-Demo auf der IE Test Drive-Website.

– Matt Rakow, Program Manager, Internet Explorer