Darstellungsfrage & Bedienungsfrage

[Tom Bombadil]

Hallo,

ich probiere gerade ein paar neue Ideen in meiner 'Spielinstallation' aus, z.B. die Anbindung von ESP's. Von der Anbindung her ist technisch soweit alles prima, die Sensoren sind seit September durchgelaufen; selbst ein 'Heartbeat' (kleine grüne LED auf den Buttons) war kein Problem.

In der Visu blende ich über einem Bild per css Buttons ein, die auf Klick/Tippen dann eine Verlaufsgrafik in einem Popup anzeigen (margin-top = -xx%, margin-left=xx%):

3-Beispiel_Popup.png

Jetzt bin ich aber bei auf ein Problem gestoßen, dessen ich mir vorher zwar irgendwo im Hinterkopf bewusst war, das mir aber bei allen anderen Seiten noch nie so heftig auf die Füße gefallen ist - die ppi des Displays. Die beiden Beispielbilder sagen sicher mehr als 1.000 Worte - oben Full-HD PC 1.920x1.080, unten iPad 2.224x1.668. Obwohl das iPad also eine höhere Auflösung hat, werden Bild und Schriften größer dargestellt als unter FullHD.

1-PC-1920x1080.png

2-IPadPro-2224x1668.PNG

Es stellen sich mir nun folgende zwei Fragen:

1. Kann mir jemand der css-Profis mal grob den Weg für eine 'best Practice' weisen, wie man mit sowas umgeht? Kennt css sowas wie einen Skalierungsfaktor, den man z.B. für das iPad angeben kann, um die Schriften kleiner zu machen (erfordert natürlich das Ermitteln der ppi o.ä. im Vorfeld)?
2. Und noch ein 'Luxusproblem', um es dem WAF recht zu machen: Hat jemand schon eine 'Wisch-Bedienung' implementiert (Seitenwechsel links/rechts), die ein Seitenmenü überflüssig machen würde?

Danke für Eure Anregungen!

/tom

[Bonze]

Das wischen heisst swipe, weitere infos dazu
https://api.jquerymobile.com/swipe/, habs selbst aber auch noch nicht gemacht..