Ich erstelle eine persönliche Portfolio-Website und möchte sicherstellen, dass meine Website sowohl für Mobilgeräte als auch für Desktops responsiv ist. Nachdem ich mit den Devtools von Chrome sichergestellt habe, dass die Abstände auf verschiedenen Mobilgeräten gut aussehen, habe ich überprüft, wie die Website auf einem mobilen Safari-Simulator aussieht, um festzustellen, dass sich das Layout im Vergleich zum Desktop verschiebt (siehe Abbildung unten). Ich erwarte, dass die Schaltfläche „Kontaktieren“ unten bleibt und das div-Element darüber wächst, um den verfügbaren Platz auszufüllen – stattdessen schwebt die Schaltfläche irgendwo in der Mitte der Seite.
Ich gehe davon aus, dass das daran liegt, dass die CSS-Stile von -webkit nicht korrekt verwendet werden, aber ich kann nicht finden, was ich anwenden soll. Der übergeordnete Behälter hat korrekterweise 100 Vh, der untergeordnete Behälter soll jedoch so groß werden, dass er den Behälter füllt, und erreicht diesen Wert eindeutig nicht.
Oben sind die HTML- und Tailwind-Stile aufgeführt, die ich derzeit verwende (minimal reproduzierbares Beispiel). Habe ich hier etwas übersehen oder habe ich falsche Annahmen darüber getroffen, wie Flex-Grow in Safari funktionieren soll? / mobil?
Links zur Live-Site
und zum Code.
Dieses Problem tritt in den meisten Abschnitten der Site auf auf Mobilgeräten, ist aber am deutlichsten in der Fußzeile zu erkennen Komponente.
Mobile version