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

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


Viewport zur korrekten Darstellung der mobilen WebAppEine 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.

 



Servus, ich bin Wolfgang.

Blogger – Maker – web & mobile Developer

Mit meinem über die Jahre gesammelten Wissen als Webworker möchte ich dir Hilfestellungen und Anregungen zur Nutzung der sich aus dem digital Lifestyle ergebenden Möglichkeiten und Notwendigkeiten geben.

Einen aktuellen Schwerpunkt auf meinem Blog bildet das Thema IoT im Zusammenspiel mit dem Raspberry Pi.


Unterstützen

Dieser Beitrag hat dir gefallen und konnte dir bei deinem Projekt oder Problem behilflich sein? Dann würde ich mich sehr freuen, wenn du dich mit einer noch so kleinen Spende erkenntlich zeigen möchtest.


Hinterlasse einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Notwendige Felder sind mit * markiert.

Eine Reaktion (0 Kommentare)