Eines der Schlüsselkonzepte in jedem responsiven Design ist die Änderung der Größe des Ansichtsfensters. Das liegt daran, dass sich mobile Ansichtsfenster stark von Desktop-Ansichtsfenstern unterscheiden. Um die Größe des Ansichtsfensters zu steuern, verwenden wir traditionell das Ansichtsfenster-Meta-Tag.
Allerdings ist das Viewport-Meta-Tag, wie alle schlimmsten Browser-Entwicklungen der letzten Ewigkeit, nicht W3C-gültig. Es wurde ursprünglich von Apple in Safari eingeführt und seitdem von anderen Browsern übernommen. Dies führt zu einer inkonsistenten Implementierung.
Eine weitere sehr nützliche Eigenschaft ermöglicht es uns, unsere Webseite im Quer- oder Hochformat zu sperren:
@viewport {Ausrichtung: Querformat;
}
Browserunterstützung
Hier die schlechte Nachricht: Derzeit wird diese Regel nur von Internet Explorer 10 und Opera unterstützt und erfordert die Browser-Präfixe -ms- bzw. -o-.
Das ist zwar gelinde gesagt enttäuschend, aber die Tatsache, dass die Viewport-Funktionalität in den meisten Browsern bereits verfügbar ist, sollte bedeuten, dass es sich um eine einfache Regel handelt, die man sich aneignen kann. Hoffentlich wird es in Kürze in nächtlichen Builds eingeführt.
Ist Ihnen die Einhaltung von Standards wichtig? Fördert oder behindert das W3C den Fortschritt im Web? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Fensterbild über LostBob Photos