Layout-Problem

[Gunther]

Moin!

Was ist denn daran "mobile"!?
Du möchtest wahrscheinlich ein responsives Layout erstellen ...!

Naja, grundsätzlich soll es erstmal eine HTML5-App mit PhoneGap werden. Ob das gleich responsive mache und als Webapp anbiete, weiß ich noch nicht genau.

Keine Ahnung ob und wie gut PhoneGap mit HTML5 und CSS3 zurechtkommt, nur hast du dann doch eh eine fertige Website ...!

Sorry, aber ich versuche mir das gerade vorzustellen, wie sich ein solches Layout u.a. auf einem Viewport von 320px x 480px und 1920px x 1080px darstellt. Bei letzterem wird das Bild dann aber bspw. sehr groß ...!

Ja, das stimmt, aber dadurch, dass es primär als App laufen soll, und von daher hauütsächlich Devices zwischen 4" und 10" Zielgruppe sind, ist das ok.

OK, und dafür gibt es ja Media Queries ...!

Packe das Image in ein Container-Element, welches entsprechend der Viewportgröße skaliert.
Dann brauchst du für dein(e) Image(s) lediglich:
img {max-width: 100%;}

Naja, das Problem ist, dass Header und Footer (also die Buttons) ja absolut positioniert werden und daher das Bild teilweise unter denselben liegen kann, was nicht gewollt ist. Ich habe es zwar mit calc() und einem margin-top versucht, das funktionierte aber bei mir weder im FF noch im Chrome. Allerdings habe ich vorhin irgendetwas gelesen, dass calc() als CSS-Funktion wohl auch Prefixes hat. Das werde ich mal testen.

Wenn Header und Footer eine feste Höhe (relative Größenangabe) haben, ist das doch ganz simpel. Und wenn nicht, ist es imho mit reinem CSS nur per 'Flexbox' machbar.

Relative Einheiten, insbesondere 'vw' und 'vh', in Kombination mit 'calc()' sind da sehr hilfreich (sofern PhoneGap das entsprechend umsetzen kann!?).

Gruß Gunther