App-Ansicht iOS-App: lila bis in die Notch, Tab-Leiste trotzdem ganz unten

Die Statusleiste ist wieder durchsichtig (black-translucent), damit der
lila Hintergrund hinter Uhrzeit und Notch weitergeht. Dass die Tab-Leiste
damit auf kurzen Seiten 59 px zu hoch hing, liegt an einem bekannten
iOS-Verhalten: In der installierten App bekommen fixierte Elemente die
volle Bildschirmhoehe nur, solange die Seite scrollbar ist.

- Installierte App auf iOS (display-mode standalone, nur iOS): Die Seite
  ist immer mindestens 1 px hoeher als der Bildschirm (100lvh + 1px).
  100lvh ist dort die volle Hoehe, 100%, 100svh und 100dvh sind zu kurz.
- Die Chat-Hoehe kommt aus 100lvh.
- Das Konto-Sheet sperrt die Seite dort nicht mehr (overflow bleibt
  sichtbar); es ist von oben mit voller Hoehe verankert, das Panel sitzt
  unten.
- Bild-Grossansicht und Kamera des Chats sind von oben mit voller Hoehe
  verankert statt mit inset: 0.
- Kuendigen/Widerrufen: dunkler Streifen hinter der weissen Statusleiste.

Browser, Android und Desktop unveraendert (pixelgleich).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-09-26 15:58:06 +00:00
1 parent 57ba2c06f9
commit d72d30dd2a
5 files changed
+41 -6

No files matched your search

+4 -3
View File
@@ -12,9 +12,10 @@
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Undurchsichtige Statusleiste: bei black-translucent ist der Bereich fuer fixierte Elemente in der
installierten iOS-App um die Statusleiste zu kurz (Tab-Leiste haengt ~59 px ueber dem Rand) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Durchsichtige Statusleiste: der lila Hintergrund reicht bis in die Notch. Damit fixierte Leisten
trotzdem ganz unten sitzen, bleibt die Seite in der installierten App immer 1 px scrollbar
(siehe "Installierte App auf dem iPhone" in login.css/kundenbereich.css) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="WEBklar">
<link rel="stylesheet" href="/login.css">