Responsives Webdesign-Ansichtsfenster


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


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 waren Webseiten nur für Computerbildschirme konzipiert, und das war üblich Webseiten sollen ein statisches Design und eine feste Größe haben.

Dann, als wir anfingen, mit Tablets und Mobiltelefonen im Internet zu surfen, behoben Die Größe der Webseiten war zu groß, um in das Ansichtsfenster 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

Mit HTML5 wurde eine Methode eingeführt, mit der Webdesigner die Kontrolle über das Ansichtsfenster übernehmen können -Tag.

Sie sollten das folgende Ansichtsfensterelement in alle Ihre Webseiten einbinden:

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

Dies gibt dem Browser Anweisungen dazu um die Abmessungen und Skalierung der Seite zu steuern.

Der Teil width=device-width legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät variieren kann).

Der Teil initial-scale=1.0 legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.

Hier ist ein Beispiel einer Webseite ohne dem Viewport-Meta-Tag und derselben Webseite mit dem Viewport-Meta-Tag:


Tipp: Wenn Sie diese Seite mit einem Telefon oder Tablet durchsuchen, können Sie auf die beiden Links oben klicken, um den Unterschied zu sehen.


Passen Sie den Inhalt an das Ansichtsfenster an

Benutzer sind es gewohnt, Websites sowohl auf dem Desktop als auch auf Mobilgeräten vertikal zu scrollen Geräte - aber nicht horizontal!

Wenn der Benutzer also gezwungen ist, horizontal zu scrollen oder herauszuzoomen, um das zu sehen Die gesamte Webseite führt zu einer schlechten Benutzererfahrung.

Einige zusätzliche Regeln, die Sie befolgen sollten:

1. Verwenden Sie KEINE großen Elemente mit fester Breite - Zum Beispiel, wenn Ein Bild wird in einer Breite angezeigt, die breiter als das Ansichtsfenster ist. Dies kann dazu führen, dass Ansichtsfenster, um horizontal zu scrollen. Denken Sie daran, diesen Inhalt so anzupassen, dass er hineinpasst die Breite des Ansichtsfensters.

2. Lassen Sie den Inhalt NICHT von einer bestimmten Ansichtsfensterbreite abhängig sein Gut rendern - Da die Bildschirmabmessungen und die Breite in CSS-Pixeln variieren Da der Inhalt zwischen den Geräten sehr unterschiedlich ist, sollte er nicht von einer bestimmten Ansichtsfensterbreite abhängig sein gut wiedergeben.

3. Verwenden Sie CSS-Medienabfragen, um unterschiedliche Stile für kleine und große Formate anzuwenden große Bildschirme - Festlegen großer absoluter CSS-Breiten für Seitenelemente führt dazu, dass das Element für das Ansichtsfenster auf einem kleineren Gerät zu breit ist. Erwägen Sie stattdessen die Verwendung relativer Breitenwerte, z. B. width: 100 %. Auch sein Achten Sie darauf, große absolute Positionierungswerte zu verwenden. Dies kann dazu führen, dass das Element beschädigt wird auf kleinen Geräten außerhalb des Ansichtsfensters liegen.