Responsive Webdesign – Grundlagen

Meta-Viewport-Angabe

Testen Sie unsere 1982 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Über die Viewport-Meta-Angabe verhindern Sie, dass Smartphones automatisch die Web-Seite kleiner skalieren. Sehen Sie sich an, welche Optionen es für diese Angabe gibt.

Transkript

Durch die Meta Viewport-Angabe verhindern Sie, dass Smartphones die Web-Seite klein skalieren. Wir wollen uns einmal ansehen was es dabei für Optionen gibt. An diesem Beispiel sehen Sie was die Meta-Angabe eigentlich macht. Normalerweise verkleinern Smartphones Web-Seiten. Das sieht man an der rechten Seite. Links sehen Sie, dass die Verkleinerung aufgehoben ist. Und das geht über eine Meta-Angabe. Schauen wir uns einmal die Optionen an. Die Meta-Angabe sieht in der einfachsten Form folgendermaßen aus. Sie haben meta name="viewport" und content=width ist gleich device-width. Nun gibt es aber auch eine Reihe von zusätzlichen Parametern, die Sie dabei angeben können. Sie können schreiben user-scalable=no,initial-scale=1, maximum-scale=1, minimum-scale=1. Und auf diese Art würden Sie die Skalierung durch den Benutzer vollkommen deaktivieren. Wichtig dabei, erst einmal formal, Sie müssen die Angaben dabei durch Komma trennen. Was bedeuten diese einzelnen Angaben? Width setzt man am häufigsten ein. Darüber kann man die Breite festlegen. Typischerweise verwendet man Width ist gleich Device-Width, aber man könnte auch eine bestimmte Breite festlegen, was im Allgemeinen aber nicht empfohlen ist. User-Scalable steuert, ob der Benutzer skalieren kann. Wenn ich hinschreibe: user-scalable=no, kann der Benutzer nicht skalieren. Initial-Scale gibt die Anfangsskalierung vor. Die kann ich beispielsweise auf 1 setzen. Maximum-Scale - die maximal mögliche Skalierung. Möglich sind dabei Werte von 0.1 bis 10.0 Und Minimum-Scale gibt die minimale mögliche Skalierung vor. Wenn Sie, wie im Beispiel, das so angeben. Also, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, dann sagen Sie auf mehrere Arten, dass der Benutzer nicht skalieren kann. Stellt sich natürlich die Frage, ob das gut ist oder nicht. Und die Antwort lautet ganz klar: Sie sollten die Skalierung nicht abschalten. Denn wenn ein Benutzer eine Web-Seite vergrößern möchte, dann tut er das nicht, um Sie zu ärgern oder um das Layout zu zerstören, sondern er tut es deswegen, weil er es sonst einfach nicht benutzen kann. Es gibt natürlich Ausnahmen von dieser allgemeinen Regel. Wenn Sie ein Browser-Spiel erstellen, kann es sinnvoll oder sogar auch notwendig sein die Skalierung abzuschalten. Initial-Scale hat aber noch eine weitere Funktion. Und das wollen wir uns einmal ansehen. Ich bin auf der Web-Seite von Chris Coyier. Der zeigt, was passieren kann beim iPhone. Wenn man vom Portrait-Modus in den Landscape-Modus wechselt. Dann gibt es so einen Zooming Bug. Das sehen Sie hier. Und den können Sie verhindern... Zweites Beispiel. ...wenn Sie Initial-Scale auf 1 setzen. Deswegen sieht die empfohlene Viewport-Angabe folgendermaßen aus. Also, content ist gleich initial-scale=1 und width ist gleich device-width. Dieses initial-scale=1 ist wie gesagt, nur notwendig, um diesen Zooming Bug im iPhone zu beheben. Die Meta Viewport-Angabe ist an sich eine Erfindung von Apple. Das W3C sieht etwas anderes an dieser Stelle vor, nämlich eine @viewport-Regel. Ich habe einmal die entsprechende Spezifikation aufgerufen. Und da wird eine @viewport-Regel definiert. Das heißt das W3C sieht vor, dass Meta Viewport nicht im HTML-Code über eine Meta-Angabe steuert, sondern direkt im CSS-Code, was natürlich sinnvoll ist. Wo das implementiert ist, ist beispielsweise im Internet Explorer 10. Dort müssen Sie es allerdings verwenden mit dem Präfix -ms-. Dass das so hier ausschaut. Und Sie sehen dann Beispiele, wie man das nutzen kann, dass man eben Höhe festlegt etc. Und ganz klassisch Width, Device-Width - dieses mal mit der @viewport-Angabe. Bis das aber mehr von Browsern unterstützt wird, werden Sie doch noch zu der Meta-Angabe greifen müssen. Und die empfohlene Variante sieht folgendermaßen aus: meta name="viewport" content="initial-scale=1" width="device-width"

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!