Die alte Anleitung war nur für iOS, inhaltlich veraltet (kein Hinweis auf
Safari-Pflicht, keine In-App-Browser-Warnung) und lief im mobilen App-Shell-
Layout von base.html - dessen fixe Viewport-Höhe und ausgeblendete Header-
Icons (die zugehörige JS zum Einblenden fehlte auf dieser Seite) passen
nicht zu einer längeren, bebilderten Anleitung.
- Eigenständige, responsive Seite (kein app-shell mehr) - normal scrollbar,
auch auf Desktop sinnvoll lesbar (für geteilte Links)
- iOS (Safari) und Android (Chrome) je mit 3 Schritten, automatische
Erkennung per User-Agent mit manuellem Umschalter, Wahl wird gemerkt
- Warnhinweise: iOS braucht zwingend Safari (In-App-Browser-Falle erwähnt),
Android-Menüpunkt kann je nach Hersteller anders heißen
- Eigene, einfache SVG-Schritt-Icons statt nachgestellter Apple/Google-
Screenshots - ehrlicher als exakte UI vorzutäuschen, und markenrechtlich
unproblematisch
- Bestehende Marke konsistent weitergeführt (Grün/Teal, App-Icon), keine
neue visuelle Sprache - die kommt für die geplante Landingpage
- Kontaktwege (Feedback-Mail, WhatsApp) im Footer wie im Rest der App
Lokal getestet: Django-Check sauber, Rendering per Headless-Chrome-Screenshot
bei 900px (iOS- und Android-Ansicht) geprüft, Content-Struktur bei 500px
Layoutbreite ohne Overflow verifiziert (das Tool in dieser Umgebung erzwingt
intern eine Mindestbreite, echte Handybreiten ließen sich nicht zuverlässig
screenshotten - defensiv trotzdem mit clamp()-Titelgröße und min-width:0 an
den Flex-Textkindern gegen schmale Displays abgesichert). Empfehle echten
Gerätetest.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Samuel Zielke
1e6a83514f