Viewport

Anzeigenbereich

Die Größe des Viewports der jeweiligen Webanwendungen kann sehr unterschiedlich sein, je nachdem um welches Endgerät es sich handelt. Die Höhe und Breite des Gerätes stellen den potenziellen Platz dar, auf dem etwas angezeigt werden kann.

Der Viewport ist also der Platz, in dem dann auch tatsächlich die Webanwendung dargestellt wird. Damit eine Seite sowohl auf dem Smartphone als auch auf dem Computer optimal präsentiert wird, werden Regeln für den Viewport festgelegt.

Mit dem HTML-Meta-Element Viewport ist es möglich die Breite des entsprechenden Gerätes abzufragen, damit die Regeln für die Darstellung auch greifen.

Der Bereich, welcher sich durch das Scrollen erschließt, gehört nicht zum Viewport

Viewport – Anzeigenbereich festlegen

Anzeigebereich in CSS festlegen: Die Attribut-Wert-Paare sollten bestenfalls möglichst am Anfang der CSS-Datei notiert werden. Vor allem sollten diese vor den Media-Queries stehen, damit keine Schwierigkeiten bei der Darstellung auftreten.

Beispiel:


@viewport {
width: device-width;
}


Die Breite wird mit width so angegeben, dass sie sich an die Breite des Bildschirms vom Endgerät anpasst. Optional kann man darunter einen Zoom-Faktor notieren, um das Minimum und Maximum des Zoom-Levels festzulegen.

Beispiel des Zoom-Levels:


@viewport {
width: device-width;
min-zoom: 1;
max-zoom: 2;
}


Die Attribut-Wert-Paare sollten bestenfalls möglichst am Anfang der CSS-Datei notiert werden

Anzeigenbereich im HTML

Um den Viewport einzustellen, setzt man folgende Codezeile in den Head-Bereich der HTML-Datei:


<meta name="viewport" content="width=device–width ,initial–scale=1-0" />


Hier passt man zuerst den Inhalt der Website an die Breite des Bildschirms des Endgeräts an. Dies erreicht man mit der Angabe width=device-width. Danach definiert man das Zoomlevel mit initial-scale=1. Dies bestimmt den Faktor des Zooms, wenn die Website das erste mal geladen wird. Möchte man seinen Nutzern eine optimierte Darstellung bieten, wenn das Endgerät gedreht wird, verwendet man die Attribute landscape und portrait.

Möchte man seinen Nutzern eine optimierte Darstellung bieten, wenn das Endgerät gedreht wird, verwendet man die Attribute landscape und portrait.

Viewport – Typische Einstellungen in Pixel

• Hochauflösende Computerbildschirme Bildschirmbreite: 1200px und höher
• Niedrigauflösende Computerbildschirme Bildschirmbreite: ca. 1024 bis 1200 px
• Phablets und Tablets Bildschirmbreite: ca. 768 bis 1024 px
• Smartphones Bildbreite: ca. 320 bis 768 px

Viewport – Problematiken

Ein Problem ist, dass die Displays der verschiedenen Mobilgeräte unterschiedliche Größen aufweisen und es als schwierig gilt den Viewport für alle korrekt anzupassen. Empfehlenswert ist hierbei die korrekte Ausgabe mithilfe von Tools zu testen. Zudem sollte man auch reale Tests auf mobilen Endgeräten durchführen, damit die wirkliche Darstellung ersichtlich ist.

Die Pixeldichte stellt ebenfalls ein Problem dar. Die Tiefe der Pixel sollte wichtiger sein als die Größe des Bildschirms. Pixel wurden bis jetzt stets als Einheit geahndet. Moderne Endgeräte verfügen jedoch auch über eine Pixeltiefe und -dichte. Für Entwickler ist es daher wichtig zu wissen, wie viele Inhalte innerhalb eines Displays angezeigt werden können und nicht wie Inhalte skaliert werden.