---

Die Viewport Angabe, unerlässlich für die mobile WebApp

Veröffenticht am 30.12.2015    von Wolfgang     in der Kategorie Temperatur WebApp     bisher 1 Reaktion    Zuletzt überarbeitet am 21.02.2017

---

Eine der größten Herausforderungen in der Webentwicklung sind die von jedem Browser-Anbieter nicht gleich umgesetzten bzw. unterstützten Standards. Für die Entwicklung von mobilen Web-Anwendungen, die möglichst auf allen verschiedenen Geräten mit den dort vorhandenen unterschiedlichen Browsern gleich aussehen sollen, kommen die unterschiedlichsten Darstellungs-Spezifikationen hinzu. Eine Lösung für die verschiedenen Auflösungen findet man in der Viewport Angabe, und diese ist auch sehr hilfreich für Websites im sogenannten Responsive Design.


Für die Beitragsreihe, deren Einleitung du im Beitrag “Mobile WebApp für die Temperaturmessung am Raspberry Pi” findest, habe ich folgendes Video mit ca. 57 Minuten erstellt. In diesem erkläre ich das Zusammenspiel und die Funktionen der beiden Programme.

Das meta-Tag viewport einbinden

Das meta-Tag wird in den head-Bereich der HTML Datei eingebunden. Der Darstellungsbereich wird über die optionalen Parameter im content-Attribut beschrieben.

Die Parameter des meta-Tag

Folgende Parameter können mit dem content-Attribut bestimmt werden.

width

Dieser Wert dient zur Angabe der Breite des Darstellungsbereiches in Pixel. Über die Angaben device-width wird die Breite automatisch an das Ausgabegerät angepasst.

height

Dieser Wert dient zur Angabe der Höhe des Darstellungsbereiches in Pixel. Über die Angabe device-height wird die Höhe automatisch an das Ausgabegerät angepasst.

initial-scale

Dieser Wert bestimmt den Skalierungsfaktor, der beim Laden der Seite angewendet wird.

user-scalable

Mit diesem Parameter, der entweder yes oder no ist, kann die Zoomfunktion deaktiviert werden. Automatisch ist der Wert yes.

maximum-scale

Dieser Wert dient zur Angabe des maximalen Zoomfaktors und gilt nur bei aktivierter Zoomfunktion.

minimum-scale

Dieser Wert dient zur Angabe des minimal möglichen Zoomfaktors und gilt nur bei aktivierter Zoomfunktion.

Die Parameter des viewport-Tag in meinem Beispiel sind:

• Darstellungsbreite der Seite entspricht der vom Gerät zur Verfügung gestellten Breite,
• die Seite wird im Faktor 1 dargestellt,
• die Zoomfunktion ist deaktiviert.