Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Kleiner Tipp am Rande: Vergiss nicht das Viewport Meta Tag

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Explaining the “Details” and “Summary” Elements

German (Deutsch) translation by Viktoriana Kostov (you can also view the original English article)

Ich erinnere mich an meine Jungfernfahrt in das responsive Webdesign; ich habe das klassische Raster benutzt, mit dem flexiblen Layout gerungen, und zum ersten Mal die Media Queries in Angriff genommen. Das Ausweiten und Verkleinern des Browserfensters zeigte ein übezeugendes Ergebnis meiner Arbeit, das Design passte sich seiner Umgebung an. Dann habe ich es auf einem Mobiltelefon getestet. Es funktionierte nicht - ich schaute auf eine verkleinerte Version der Vollbildschirmansicht. Die Lösung, wie es sich herausstellte, war einfach..

Anmerkung: Dieses Tutorium wurde im Februar 2012 zum ersten Mal veröffentlicht, wird aber oft als Referenz in anderen Tutorien genannt (und die Dinge haben sich verändert), deshalb dachte ich, eine Aktualisierung sei gerechtfertigt.

Der Knackpunkt

Falls du nicht weiter in diesem Artikel liest, nimm diesen Rat mit: falls du ein flexibles Design machst, benutze das Viewport Meta Tag im <head>. Schon in seiner Grundform wird es dir zur geräteübergreifenden Layout-Seelenruhe verhelfen:

Das Problem

Nehmen wir ein Layout Beispiel das ich gezaubert habe. Werfe einen Blick drauf; du wirst sehen, wie es sich verkleinert und vergrössert, wenn du das Format deines Browserfensters veränderst. Es gibt auch eine einzige Media Query, die den Text vergrössert und der Titelzeile eine helle #ff333e Farbe auf breiteren Bildschirmen gibt. Schön.

So sieht es in OSX Chrome aus:

viewport-chrome-correct

Und so sieht es aus, wenn das Browserfenster kleiner ist:

viewport-chrome-squish

Sehen wir uns jetzt an, wie das auf einem Smartphone aussieht (in diesem Fall iOS Safari auf dem iPhone 4):

viewport-iphone-incorrect

Das erste, was du bemerken wirst, ist die rote Titelzeile - das todsichere Zeichen, dass wir nicht auf das schmale Layout schauen, das wir erwartet haben. Wir sehen eigentlich nur eine verkleinerte Version davon.

iOS Safari geht davon aus, dass eine Webseite 980px breit ist, und zoomt heraus, damit das Ganze in die vorhandenen 320px passt (iPhone 4). Der Inhalt ist dann schlechter lesbar, es sei denn du zoomst es heran.

Warum?

Es heisst, die Vermutung sei die Mutter oder eine andere nahe Verwandte des Untergangs, aber vermuten ist genau das, was mobile Browser tun müssen, wenn du ihnen keine ausdrückliche Anweisung gibst. Wenn du eine Website in einem mobilen Browser besuchst, wird der vermuten, dass du die grosse Desktop-Version anschaust und dass du sie ganz ansehen möchtest, nicht nur die obere linke Ecke davon. Deshalb wird der Browser (im Falle von iOS Safari) die Viewport Breite auf 980px setzen, und alles in das kleine Display pressen.

Das Viewport Meta Tag

Auftritt: Viewport Meta Tag, eingeführt von Apple, von anderen eingesetzt und weiterentwickelt.

Und so sieht es aus:

Innerhalb von content="" kannst du eine Reihe durch Komma getrennter Werte eingeben, aber wir werden uns vorerst auf die wesentlichen konzentrieren.

Zum Beispiel, wenn dein mobiles Design auf 320px Breite ausgelegt ist, kannst du die Viewport Breite so einstellen:

Für flexible Layouts ist es praktischer, deine Viewport Breite mit der Breite des betreffenden Geräts anzulegen, damit die Breite deines Layouts der Breite des Geräts, das du eingibst, entspricht:

Um ganz sicher zu gehen, dass dein Layout so dargestellt wird wie beabsichtigt, kannst du auch die Zoom Stärke setzen. So wird, zum Beispiel:

... gewährleisten, dass beim Seitenöffnen dein Layout im 1:1 Maßstab korrekt dargestellt wird. Kein zoomen wird stattfinden. Du könntest sogar weitergehen und jegliches zoomen seitens der Nutzer unterbinden:

Anmerkung: Vor der Anwendung des maximum-scale Parameters, solltest du gut erwägen, ob du tatsächlich deine Nutzer am heranzoomen hindern möchtest. Werden sie dann alles gut lesen können?

Falsche Benutztung von Viewport Meta Tag kann die User mit Sehproblemen daran hindern, barrierefrei auf deine Website zuzugreifen

Zusammenfassung:

Diese Werte zusammen eingesetzt geben uns eine tolle Vorlage zum Arbeiten:

Schauen wir uns an, wie sich das auf unser Beispiel auswirkt.

viewport-iphone-correct

Wie du siehst, alles bleibt in korrektem Maßstab. Der Text wird umbrochen statt verkleinert, und unser visuelles Hilfsmittel ( die rote Titelzeile ) ist verschwunden.

Aber!

Danke an Jason, der hierauf in den Kommentaren aufmerksam gemacht hat. Mit der Angabe, dass die Breite deines Layouts der Breite des Geräts entspricht, wirst du auf Probleme stossen, wenn das Gerät ins Querformat gedreht wird. Sehe dir im Querformat an, wie ein iPhone 4 dein Demo behandelt :

Zerschossen
Zerschossen.

Der Browser denkt, er hat den Befehl heranzuzoomen, damit die Breite der Seite angeglichen wird.

Um dies zu umgehen, könnten wir, wie Jason es vorschlägt, JavaScript nutzen, um konditional auszuwählen, welche Metatag Attribute wir nehmen, aber die einfachste Lösung scheint zu sein, die width schlicht komplett zu ignorieren. Allein durch das Festlegen von initial-scale wird die Breite schon abgeleitet. Hier siehst du, wie unser neues, vereinfachtes Demo im Querformat dargestellt wird:

Much better
Viel besser.

Nicht der Standard den du suchst

Das Viewport Metatag war eine Problemlösung von Apple. Es wurde schnell von anderen Plattformen angenommen, aber es wurde nie vom W3C eingereicht. Microsoft brachte dies ans Licht, als sie entschieden, dass unter bestimmten Umständen, der IE10 das Viewport Metatag ignorieren soll. Stattdessen, zogen sie es vor, die CSS Device Adaptation zu nutzen, auf die sich W3C verlässt.

Kurz, ähnliche Viewport Eigenschaften werden durch die Nutzung der @viewport Regel innerhalb von CSS, statt im HTML definiert.

Oder, in Übereinstimmung mit unserem neuem keine Gerätebreite definieren Ansatz, könnten wir folgendes festlegen:

Da es sich um ein laufendes Projekt handelt, verlangt IE10 die prefixed-Version dieses Vorschlags, und sie sieht in etwa so aus:

Das ist eine viel elegantere Lösung als das Metatag, ist aber noch weit von der vollen Unterstützung entfernt. Stecke das in dein CSS jetzt, um sicher zu gehen, dass sich dein responsives Design im IE10 "snap mode" benimmt, und behalte die zukünftige Entwicklung im Auge. In diese Richtung wird sich die Viewport Kontrolle bewegen.

Mehr darüber lesen kannst du im Artikel von Tim Kadlec IE10 Snap Mode and Responsive Design.

Fazit

Responsives Webdesign ist nicht nur für Menschen, die es mögen ihren Browsern beim Zusammenziehen und Auseinanderdehnen zuzusehen, es geht darum, so viele unterschiedliche Geräte, Bildschirme und Aufl&oulm;sungen zu beliefern wie möglich! Schmeiss das Viewport Meta Tag in das <head>, und die @viewport Regel in dein CSS wenn du flexible Layouts baust und dann kann es losgehen.

Weiterführende Lektüre

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.