Die Viewport Angabe, unerlässlich für die mobile WebApp
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.
|
1 2 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
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.
Kleiner Hinweis, alle Kommentare werden moderiert.
Dies bedeutet, der Kommentar wird vor der Veröffentlichung durchgelesen und von mir geprüft. Auch behalte ich mir vor, jeden Kommentar zu löschen, der nicht direkt auf das Thema abzielt oder nur den Zweck hat, Leser oder Autoren herabzuwürdigen.