Responsives Webdesign -Viewport

Was ist Viewport?

Der Viewport ist der sichtbare Bereich der Webseite des Benutzers.

Auf Chinesisch kann Viewport mit '视区' übersetzt werden.

Mobile Browser platzieren die Seite in einem virtuellen "Fenster" (Viewport), und dieses virtuelle "Fenster" (Viewport) ist normalerweise breiter als der Bildschirm, sodass jede Webseite nicht in ein sehr kleines Fenster gequetscht werden muss (was das Layout von Seiten zerstören würde, die nicht für mobile Browser optimiert sind). Benutzer können schwenken und zoomen, um verschiedene Teile der Seite zu sehen.

Viewport festlegen

Ein üblicher Viewport-Meta-Tag für mobil optimierte Seiten sieht ungefähr so aus:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width: steuert die Größe des Viewports. Er kann auf einen bestimmten Wert wie 600 oder auf einen speziellen Wert wie device-width gesetzt werden, die Breite des Geräts (in CSS-Pixeln bei Skalierung auf 100 %).
• height: Entspricht width und gibt die Höhe an.
• initial-scale: das anfängliche Zoomverhältnis, d. h. das Zoomverhältnis beim ersten Laden der Seite.
• maximum-scale: das maximale Verhältnis, auf das der Benutzer zoomen darf.
• minimum-scale: das minimale Verhältnis, auf das der Benutzer zoomen darf.
• user-scalable: ob der Benutzer manuell zoomen kann.

Die folgenden Beispiele zeigen die Auswirkung der Verwendung von viewport gegenüber der Nichtverwendung von viewport auf mobilen Geräten:

Beispiel 1: Ohne Hinzufügen von viewport:

Beispiel 2: Mit hinzugefügtem viewport:

Wenn Sie die Seite auf einem Tablet oder Telefon besuchen, können Sie direkt klicken, um den Effekt zu sehen.