Responsive Webdesign -Viewport

Was ist der Viewport?

Der Viewport (viewport) ist der sichtbare Bereich des Benutzers auf der Webseite.

Der Viewport variiert von Gerät zu Gerät, und er ist auf Mobiltelefonen kleiner als auf Computerbildschirmen.

Vor Tablets und Smartphones waren Webseiten nur für Computermonitore konzipiert, und es war sehr häufig, dass Webseiten statisch gestaltet und fest in der Größe waren.

Dann, als wir begannen, im Internet über Tablets und Smartphones zu surfen, waren Webseiten in der Regel zu groß, um den Viewport zu passen. Um dieses Problem zu lösen, reduzieren die Browser auf diesen Geräten die gesamte Webseite proportioniert, um die Bildschirmgröße zu passen.

Das ist nicht perfekt! Es ist eher eine schnelle Korrektur.

den Viewport

HTML5 hat ein Verfahren eingeführt, mit dem Web-Designer <meta> Tag hinzufügen, um den Viewport zu steuern.

Sie sollten die folgenden <meta> Viewport-Element:

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

Es bietet dem Browser Anweisungen darüber, wie die Größe der Seite und das Zoomverhältnis gesteuert werden sollen.

width=device-width Einige Einstellungen stellen die Breite der Seite ein, um der Breite des Bildschirms des Geräts zu folgen (abhängig vom Gerät).

Wenn der Browser die Seite zum ersten Mal lädt,initial-scale=1.0 Einige Einstellungen für die初始缩放级别。

Nachstehend sind Beispiele für Webseiten mit und ohne Viewport-Metatag aufgeführt:

Hinweis:Wenn Sie diese Seite mit einem Smartphone oder Tablet browsen, können Sie auf die beiden folgenden Links klicken, um die Unterschiede zu sehen.



Ohne Viewport-Metatag


Mit Viewport-Metatag

Passt den Inhalt an die Größe des Viewports an

Benutzer haben die Gewohnheit, Websites auf Desktop- und mobilen Geräten vertikal zu scrollen, anstatt horizontal!

Daher führt das Zwingen der Benutzer, horizontal zu scrollen oder zu zoomen, um die gesamte Webseite zu sehen, zu einer schlechten Benutzererfahrung.

Einige zusätzliche Regeln, die befolgt werden müssen:

1. Verwenden Sie keine größeren festen Breiten für Elemente - Zum Beispiel kann ein Bild, das breiter als der Viewport ist, zu horizontalen Scrollen im Viewport führen. Stellen Sie sicher, dass dieser Inhalt auf die Viewport-Breite angepasst wird.

2. Lassen Sie den Inhalt nicht von einer bestimmten Viewport-Breite abhängig sein, um gute Ergebnisse zu erzielen - Da die Bildschirmgröße und Breite in Pixeln zwischen Geräten stark variieren, sollte das Inhalt nicht von einer bestimmten Viewport-Breite abhängig sein, um gute Ergebnisse zu erzielen.

3. Verwenden Sie CSS Medienabfragen, um für kleine und große Bildschirme unterschiedliche Stile anzuwenden - Eine größere CSS absolute Breite für Seitenelemente führt dazu, dass das Element für kleinere Geräte zu breit ist. Stattdessen sollten relative Breitenwerte in Betracht gezogen werden, z.B. width: 100%. Außerdem sollte mit größeren absoluten Positionswerten vorsichtig umgegangen werden, da dies dazu führen kann, dass das Element aus dem Sichtbereich eines kleinen Geräts herausfällt.