Responsive-Design Gerätedimensionen

Mit QuickHMI können Sie Ihre Visualisierung kinderleicht für verschiedene Endgeräte anpassen. Dafür stehen Ihnen im Editor 3 verschiedene Layouts zur Verfügung (Klein, Mittel, Groß) in denen Sie unter anderem die Anordnung von Steuerelementen für die Darstellung auf verschiedene Bildschirmbreiten optimieren können.

Um ein entsprechendes Layout auszuwählen, verwendet QuickHMI sogenannte Media-Queries. Ein Media-Query funktioniert so, dass eine bestimmte Mindestbreite festgelegt wird, ab der ein Layout in QuickHMI verwendet werden soll. Standardmäßig sind diese in QuickHMI auf 200 Pixel für das kleine Layout, 1.000 Pixel für das mittlere Layout, und 1.800 Pixel für das große Layout definiert. Diese Werte lassen sich Ihren Anforderungen nach in den Projekteinstellungen ändern.

Dies sind allerdings logische Pixel, mit denen CSS und Webinhalte arbeiten. CSS-Pixel sind nicht unbedingt dasselbe wie Gerätepixel (die tatsächliche Auflösung Ihres Geräts). Die CSS-Pixeldichte wird in der Regel mit 96 Punkten pro Zoll (DPI) angegeben, kann aber je nach Gerät und Anzeigeeinstellungen variieren.

Oberhalb wird die logische Breite des aktuellen Gerätes angezeigt (bitte darauf achten das die Seite im Vollbild angezeigt wird). Diesen Wert können Sie in QuickHMI eintragen, um ein bestimmtes Layout auf diese Größe einzustellen.