Responsive Webdesign - Der Viewport
Was ist das Ansichtsfenster?
Der Viewport ist der für den Benutzer sichtbare Bereich einer Webseite.
Der Darstellungsbereich variiert je nach Gerät und ist auf einem Mobiltelefon kleiner als auf einem Computerbildschirm.
Vor Tablets und Mobiltelefonen wurden Webseiten nur für Computerbildschirme entworfen, und es war üblich, dass Webseiten ein statisches Design und eine feste Größe hatten.
Als wir dann begannen, mit Tablets und Mobiltelefonen im Internet zu surfen, waren Webseiten mit fester Größe zu groß, um in den Darstellungsbereich zu passen. Um dies zu beheben, verkleinerten Browser auf diesen Geräten die gesamte Webseite, um sie an den Bildschirm anzupassen.
Das war nicht perfekt!! Aber eine schnelle Lösung.
Festlegen des Ansichtsfensters
HTML5 hat eine Methode eingeführt, mit der Webdesigner über das
<meta>Tag die Kontrolle über den Ansichtsbereich übernehmen können.
Sie sollten das folgende <meta>Viewport-Element in alle Ihre Webseiten einfügen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dadurch erhält der Browser Anweisungen zum Steuern der Seitenabmessungen und -skalierung.
Der width=device-widthTeil legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät unterschiedlich ist).
Das initial-scale=1.0Teil legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.
Hier ist ein Beispiel für eine Webseite ohne das Viewport-Meta-Tag und dieselbe Webseite mit dem Viewport-Meta-Tag:
Tipp: Wenn Sie diese Seite mit einem Telefon oder Tablet durchsuchen, können Sie auf die beiden obigen Links klicken, um den Unterschied zu sehen.
Passen Sie den Inhalt an das Ansichtsfenster an
Benutzer sind es gewohnt, Websites sowohl auf Desktop- als auch auf Mobilgeräten vertikal zu scrollen – aber nicht horizontal!
Wenn der Benutzer also gezwungen ist, horizontal zu scrollen oder herauszuzoomen, um die gesamte Webseite zu sehen, führt dies zu einer schlechten Benutzererfahrung.
Einige zusätzliche Regeln zu beachten:
1. Verwenden Sie KEINE großen Elemente mit fester Breite . Wenn beispielsweise ein Bild mit einer Breite angezeigt wird, die breiter als das Ansichtsfenster ist, kann dies dazu führen, dass das Ansichtsfenster horizontal gescrollt wird. Denken Sie daran, diesen Inhalt so anzupassen, dass er in die Breite des Darstellungsbereichs passt.
2. Lassen Sie den Inhalt NICHT von einer bestimmten Darstellungsbreite abhängig sein, um gut wiedergegeben zu werden – Da die Bildschirmabmessungen und die Breite in CSS-Pixeln von Gerät zu Gerät stark variieren, sollte sich der Inhalt nicht auf eine bestimmte Darstellungsbreite verlassen, um gut wiedergegeben zu werden.
3. Verwenden Sie CSS-Medienabfragen, um unterschiedliche Stile für kleine und große Bildschirme anzuwenden – Wenn Sie große absolute CSS-Breiten für Seitenelemente festlegen, wird das Element zu breit für den Darstellungsbereich auf einem kleineren Gerät. Ziehen Sie stattdessen die Verwendung relativer Breitenwerte in Betracht, z. B. width: 100 %. Achten Sie auch darauf, große absolute Positionswerte zu verwenden. Dies kann dazu führen, dass das Element auf kleinen Geräten aus dem Darstellungsbereich fällt.