Geräteanpassung

Als Webentwickler oder Entwickler einer Windows Store-App mit JavaScript sind Sie in der Zwickmühle: Programmieren Sie Ihre Website so, dass sie mit möglichst vielen Geräten, Größen und Auflösungen funktioniert, oder riskieren Sie, dass Sie Benutzer verlieren, indem Sie es zulassen, dass Inhalte abgeschnitten (in festen Layouts) oder wild durcheinandergewirbelt (in dynamischen Layouts) werden? Die @-ms-viewport-Regel – in Kombination mit Cascading Stylesheet (CSS)-Medienabfragen – bietet eine Lösung für dieses Problem: Sie ermöglicht es Webentwicklern und Entwicklern von Windows Store-Apps mit JavaScript unter Windows 8, das Layout von Websites und Apps für verschiedene Geräte mit minimalem Aufwand zu optimieren.

Die @-ms-viewport-Regel basiert auf der @viewport-Regel, die in der Spezifikation CSS-Geräteanpassung definiert ist. Diese Spezifikation ist derzeit in der Arbeitsentwurfsphase. Bedenken Sie bei der Implementierung von @-ms-viewport in Internet Explorer 10 und Windows Store-Apps mit JavaScript, dass die Zuordnung nicht exakt wie in der Spezifikation definiert erfolgt. Dies wird eventuell geändert, da die Spezifikation zur CSS-Geräteanpassung überarbeitet und verbessert wird.

Anzeigen von Websites in schmalen Fenstern

Die meisten Websites sind heutzutage nicht sehr nützlich, wenn Sie in einem sehr schmalen Fenster angezeigt werden. Feste Layouts können abgeschnitten, dynamische Layouts durcheinandergewirbelt werden. App-Szenarien in Windows 8 beinhalten oft sehr schmale Fenster. Um Probleme mit abgeschnittenen oder durcheinandergewirbelten Inhalten zu vermeiden, werden die Inhalte automatisch verkleinert. Dafür ist kein zusätzlicher Aufwand für Sie als Entwickler nötig, aber je nach Standardbreite Ihrer Inhalte ist dies eventuell nicht ideal. Die Benutzer müssen stets zoomen, wenn Sie die Inhalte aufrufen.

Mithilfe der @-ms-viewport-Regel können Sie einfacher optimierte Websites und Apps bereitstellen. Statt Sie in ein einheitliches Szenario zu pressen, in dem Sie eine kleine Benutzeroberfläche umständlich vergrößern oder eine große übermäßig komprimieren müssen, können Sie @-ms-viewport und den vorhandenen Support für CSS-Medienabfragen verwenden, um Ihre Website oder App für verschiedene Auflösungsbereiche zu optimieren. Sie können festlegen, dass Seiten, die für einen bestimmten Auflösungsbereich optimiert sind, natürlicher für Geräte mit Auflösungen in diesem Bereich skaliert werden. So können Sie Ihre Website nicht nur für Desktop-Displays, sondern auch für kleine Slate-PCs oder sogar für den angedockten Zustand optimieren.

Verwenden der "@-ms-viewport"-Regel

Die @-ms-viewport-Regel bewirkt in Kombination mit Medienabfragen eine Optimierung des Layouts. Üblicherweise schachteln Sie die @-ms-viewport-Regel in der Medienabfrage, wie im folgenden Pseudocodeausschnitt gezeigt:

@media [media query logic here] {
  @-ms-viewport {
    [viewport size here]
  }
  [CSS for this layout combination goes here.]
}

Beachten Sie, dass dieses CSS in anderen Browsern als Internet Explorer 10 (oder in älteren Versionen von Windows Internet Explorer) keine Fehler verursacht. Wenn die @-ms-viewport-Regel und ihr Inhalt nicht erkannt werden, werden sie einfach ignoriert.

Verwendungsbeispiel: Webseite mit Optimierung für den angedockten Zustand

Im folgenden Beispiel ist eine gängige Verwendung der @-ms-viewport-Regel dargestellt. Diese Auswahl kann verwendet werden, um eine kleine Version der Webseite für die Anzeige im angedockten Zustand zu optimieren.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

Jeder Viewport, der schmaler ist als 400 Pixel, (z. B. der angedockte Zustand) wird auf eine Breite von 320 Pixeln ausgelegt und passend skaliert. Das darunter aufgeführte CSS (das wahrscheinlich für einen kleinen Bildschirm optimiert wurde) wird angewendet.

Verwendungsbeispiel: App mit fester Größe

Das folgende sehr einfache Beispiel zeigt die Verwendung der @-ms-viewport-Regel ohne Medienabfrage (d. h., die Regel wird in allen Fällen angewendet).


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

Dieses Beispiel könnte z. B. in einer Windows Store-App mit JavaScript verwendet werden, die auf das Querformat festgelegt ist. Es gibt an, dass der angezeigte Inhalt (der "Viewport") unabhängig von der Bildschirmauflösung oder dem Bildschirmverhältnis (4:3, Breitbild (16:9) usw.) immer mindestens 1024 x 768 Pixel umfassen muss. Wenn der Bildschirm z. B. 1920 x 1080 Pixel groß ist (Breitbild (16:9)), wird der Viewport passend zur Höhe des Bildschirms größer skaliert. Da es sich um eine Breitbildanzeige handelt, kann die App mit normalen CSS-Methoden so zentriert werden, dass ein "Pillarbox"-Effekt entsteht (schwarze Balken beiderseits des Viewports). Auf einem Bildschirm mit 1280 × 960 Pixeln wird der Viewport größer skaliert, sodass er den Bildschirm vollständig ausfüllt, da das Seitenverhältnis des Bildschirms dem des Viewports (1024 × 768 Pixel) entspricht.

Dieses Beispiel können wir erweitern, indem wir Medienabfragen hinzufügen, die sowohl das Hoch- als auch das Querformat in dieser App zulassen:


@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 1024px;
    height: 768px;
  }
  /* CSS for landscape layout goes here */
}

@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 768px;
    height: 1024px;
  }
  /* CSS for portrait layout goes here */
}

In diesem Beispiel passiert praktisch dasselbe wie im vorherigen Beispiel. Der Unterschied ist, dass in der zweiten @media-Regel das Hochformat berücksichtigt wird. Im Hochformat kann sich die Ausrichtung des Inhalts ändern (das Layout von Text und Bildern kann sich entsprechend der anderen Richtung ändern), aber der Viewport bleibt unverändert. Die Werte für Breite und Höhe wurden vertauscht, sodass sich der sichtbare Inhaltsbereich nicht ändert.

Verwendungsbeispiel: Optimieren für die Breite

Im folgenden Beispiel sehen Sie eine Seite, deren Skalierungsverhalten mit Medienabfragen und @-ms-viewport für die Breite optimiert wurde. Beachten Sie, dass jede Medienabfrage einen anderen Auflösungsbereich abdeckt. In jedem dieser Auflösungsbereiche gibt die @-ms-viewport-Regel die Breite an, auf die bei jedem Gerät, das in diesen Bereich fällt, die Skalierung erfolgen soll. Mit dem auf jede Regel folgenden CSS wird genau definiert, wie der für diesen Auflösungsbereich skalierte Inhalt angezeigt werden soll.


@media screen and (max-width: 400px) {
    @-ms-viewport { width: 320px; }
    /* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
    @-ms-viewport { width: 400px; }
    /* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
    @-ms-viewport { width: 640px; }
    /* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
    /* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
    /* CSS for 1366px layout goes here */
}

Verwendungsbeispiel: Deaktivieren der automatischen Skalierung

Wenn das Fenster schmaler als 1024 Pixel ist, wird Inhalt von Internet Explorer für die neue Windows-Benutzeroberfläche standardmäßig automatisch skaliert. Dies betrifft in erster Linie den angedockten Zustand und das Hochformat.

In Fällen, in denen diese automatische Skalierung nicht erforderlich oder gewünscht ist, kann das device-width-Schlüsselwort verwendet werden. Dieses Schlüsselwort bedeutet, dass die Seite so optimiert ist, dass sie unabhängig von der Breite des Geräts funktioniert.


@-ms-viewport { width: device-width; }

Stellen Sie bei Verwendung dieses Schlüsselworts sicher, dass die Seite auch im schmalen angedockten Zustand und im Hochformat gut funktioniert.

API-Referenz

Device Adaptation

Beispiele und Lernprogramme

Entwickeln von adaptiven Websites

Demos für die Internet Explorer-Testversion

Mach fix!

IEBlog-Beiträge

Anpassen Ihrer Website an verschiedene Fenstergrößen
Ausbau der Netzstabilität in IE10 Release Preview

Spezifikation

CSS-Geräteanpassung

Verwandte Themen

Medienabfragen und Listener

 

 

Anzeigen: