Mobil

Fixierte Fußleiste ohne Safe-Area-Berücksichtigung

Üblicher Schweregrad: niedrig · Aufwand: gering

Woran du es erkennst

Die Seite hat eine fixierte Leiste am unteren Bildschirmrand (z. B. Sticky-CTA, Tab-Bar), aber das viewport-Meta-Tag fehlt viewport-fit=cover bzw. das Layout nutzt keine env(safe-area-inset-bottom)-Abstände — auf iPhones mit Home-Indikator liegt die Leiste über der System-Geste oder ragt in die Notch-Zone.

Warum es zählt

Auf modernen iPhones verdeckt der Home-Indikator die untersten Pixel: Ein Sticky-Button ohne Safe-Area-Padding ist schwer oder gar nicht antippbar — ausgerechnet der wichtigste Button („Jetzt kaufen") klemmt dann an der Systemleiste.

So behebst du es

  1. Ergänze im viewport-Meta-Tag viewport-fit=cover, damit die Seite den vollen Bildschirm nutzen darf.
  2. Polstere fixierte Fußleisten mit padding-bottom: env(safe-area-inset-bottom) (plus Fallback-Wert davor) — Buttons bleiben so oberhalb des Home-Indikators.
  3. Nutze für Höhen 100dvh statt 100vh bei Fullscreen-Overlays, damit dynamische Browser-Leisten das Layout nicht überdecken.
  4. Teste auf einem echten iPhone (oder Safari-Simulator mit Notch) im Hoch- und Querformat.

Zum Nachlesen