Eines der Schlüsselkonzepte in jedem Responsive Design ist die Änderung der Darstellungsgröße. Das liegt daran, dass sich mobile Ansichtsfenster stark von Desktop-Ansichtsfenstern unterscheiden. Um die Ansichtsfenstergröße zu steuern, verwenden wir traditionell das Viewport-Meta-Tag.
Allerdings ist das Viewport-Meta-Tag, wie alle schlechtesten Browser-Entwicklungen des letzten für immer, nicht W3C-gültig. Es wurde ursprünglich von Apple in Safari eingeführt und wurde seitdem von anderen Browsern übernommen. Dies führt zu einer inkonsistenten Implementierung.
Glücklicherweise ist das W3C mit der Einführung der @viewport-CSS-Regel erneut zu unserer Rettung geritten.
Mit dem alten Meta-Tag-Ansatz teilen wir dem Browser mit, wie groß der Viewport sein sollte:
Abgesehen davon, dass der Viewportbefehl ungültig ist, handelt es sich nicht um Daten, sondern um die Darstellung. Wenn wir uns also an unsere Trennungsgrundsätze für Daten und Präsentationen halten, muss der Viewport-Befehl in CSS und nicht in HTML sein.
Die W3C-Lösung in CSS sieht folgendermaßen aus:
@viewport {width: device-width;}Oder alternativ können Sie das Ansichtsfenster mit einer Zahl wie folgt festlegen:
@viewport {width: 640px;}Sie können die @ viewport-Regel in Verbindung mit @ media-Abfragen verwenden, um alle Ansichtsfenster, die größer als 960 sind, auf 960px zu verkleinern.
@media screen and (min-width: 960px){@viewport {width: 960px;}}Mit der Regel @viewport können wir auch standardmäßig auf eine Seite zoomen und sogar den maximalen Zoom einstellen:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Es ist möglich, das Zoomen vollständig zu blockieren, indem Sie die Eigenschaft user-zoom auf fixed setzen. Zoomen, insbesondere auf Smartphones, ist jedoch für die Barrierefreiheit erforderlich, und ich würde empfehlen, diese Eigenschaft zu verwenden.
Eine weitere sehr nützliche Eigenschaft ermöglicht es uns, unsere Webseite im Quer- oder Hochformat zu sperren:
@viewport {orientation: landscape;}Hier sind die schlechten Nachrichten: Derzeit wird diese Regel nur von Internet Explorer 10 und Opera unterstützt und erfordert die Präfixe -ms- und -o-Browser.
Das ist zwar enttäuschend, aber die Tatsache, dass die Viewport-Funktionalität in den meisten Browsern bereits verfügbar ist, sollte bedeuten, dass dies eine einfache Regel ist. Hoffentlich fangen wir an, dass es sehr bald in nächtlichen Builds eingeführt wird.
Ist Ihnen die Einhaltung von Standards wichtig? Unterstützt oder behindert der W3C den Fortschritt im Internet? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Fensterbild über LostBob Fotos