Handy: Sicherheitsabstaende, Wisch-Reiter, zweispaltige Uebersicht
Der wichtigste Fund: env(safe-area-inset-*) stand bereits im CSS, lieferte aber immer null -- viewport-fit=cover fehlte auf allen dreizehn Seiten. Der Code sah richtig aus und tat nichts. Zusammen mit apple-mobile-web-app-status-bar-style=black-translucent (schon gesetzt) hiess das: installiert lag die Kopfzeile auf einem iPhone hinter Uhr und Akkuanzeige. Behoben: - viewport-fit=cover auf allen 13 Seiten. - Vier Sicherheitsabstaende zentral benannt statt an jeder Stelle einzeln geschrieben. Kopfzeile weicht der Statusleiste, Container dem seitlichen Notch im Querformat, Fusszeile der Gestenleiste. - Der 'Ueberspringen'-Knopf des Vorspanns lag mit bottom:2rem praktisch AUF dem Entsperr-Strich (34px). Man haette die App verlassen statt uebersprungen. - Eigener Zweig fuer den installierten Betrieb: kein Gummiband- Nachfedern (sieht in einer App nach einem Fehler aus), kein Installations-Hinweis. - Die vier Sprungmarken auf der Rechtsseite waren 39px hoch -- fuenf unter dem Daumenmass. Ausgerechnet dort muss man zum Widerrufsrecht springen koennen. - 'Waehle links einen Verlauf aus': Auf dem Handy gibt es kein links, die Liste steht darueber. Richtungswort entfernt. - Sechs Reiter brauchten auf dem Handy drei Zeilen. Jetzt ein Wischstreifen mit Einrasten und Auslauf am Rand; der aktive Reiter wird herangeholt, wenn man ueber eine Kachel springt. - Uebersicht zweispaltig statt zwoelf Zeilen untereinander: 2635px -> 1924px. Eine Uebersicht, an der man vorbeiwischen muss, ist keine. Geprueft mit 55 neuen Handy-Pruefungen auf iPhone 14 Pro, Pixel 7 und 320px Breite, jeweils im Browser und im installierten Zweig. Drei Fehlalarme der eigenen Pruefung wurden begruendet ausgenommen (Honigtopf bei left:-9999px, Eingabefeld in einer Beschriftung, Inline-Link im Fliesstext -- WCAG 2.5.8 nimmt letztere ausdruecklich aus). Zwei Selbstkorrekturen an der Pruefung dokumentiert: Die Emulation von display-mode wirkt nicht (Chromium nimmt den Befehl an und ignoriert ihn) -- ohne das waeren die zwoelf 'installiert'-Zeilen ein zweiter Browser-Durchgang gewesen. Und die Messung gegen die Systemleisten mass zuerst die Kastenkante statt der Inhaltskante und meldete elf korrekte Seiten als fehlerhaft. Eine Selbstpruefung mit einem absichtlich falsch gesetzten Knopf belegt jetzt, dass die Messung echte Fehler findet. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+121
-2
@@ -905,7 +905,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
/* Vollbildnavigation auf dem Handy (Masterplan S.5), aber scrollbar —
|
||||
bei 8 Punkten + Sprachschalter passt sonst nicht alles auf ein
|
||||
kleines Display. */
|
||||
max-height: calc(100vh - 70px);
|
||||
max-height: calc(100dvh - 70px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.wd-nav.wd-offen { display: flex; }
|
||||
@@ -1710,7 +1710,16 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgb(var(-
|
||||
margin: 1.2rem 0 1.6rem;
|
||||
}
|
||||
.rl-nav a {
|
||||
padding: .42rem .85rem; border-radius: 999px;
|
||||
/* inline-flex + min-height 44px statt nur Innenabstand.
|
||||
|
||||
Mit reinem padding kamen die vier Sprungmarken auf 39px -- fuenf
|
||||
Pixel unter dem Daumenmass. Genau derselbe Fall wie frueher bei
|
||||
.wd-nav a (dort waren es 43px): Ein Innenabstand, der auf dem
|
||||
Bildschirm gut aussieht, ergibt nicht automatisch ein treffbares
|
||||
Ziel. Und ausgerechnet auf der Rechtsseite muss man verlaesslich
|
||||
zum Widerrufsrecht springen koennen. */
|
||||
display: inline-flex; align-items: center; min-height: 44px;
|
||||
padding: .42rem .95rem; border-radius: 999px;
|
||||
border: 1px solid var(--wd-rand); background: var(--wd-glas);
|
||||
font-size: .88rem; color: var(--wd-text-mid) !important; text-decoration: none;
|
||||
}
|
||||
@@ -2130,3 +2139,113 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wd-karte::after { display: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
HANDY UND INSTALLIERTE APP — Sicherheitsabstände
|
||||
|
||||
AUSGANGSLAGE (gefunden am 23.08.2026)
|
||||
Die Seite trug bereits `apple-mobile-web-app-status-bar-style:
|
||||
black-translucent`. Das heißt wörtlich: Der Seiteninhalt beginnt bei
|
||||
y=0 und läuft UNTER Uhr, Empfangsbalken und Akkuanzeige durch. Auf
|
||||
einem iPhone mit Aussparung stand die Kopfzeile also im installierten
|
||||
Betrieb hinter der Statusleiste.
|
||||
|
||||
Gleichzeitig fehlte `viewport-fit=cover` auf allen dreizehn Seiten.
|
||||
Ohne diese Angabe liefert jedes `env(safe-area-inset-*)` schlicht
|
||||
null. Die eine Stelle, die den unteren Abstand bereits benutzte (der
|
||||
Installations-Hinweis), war damit wirkungslos — sie sah richtig aus
|
||||
und tat nichts. Genau die Sorte Fehler, die man nie bemerkt, weil der
|
||||
Code stimmt.
|
||||
|
||||
LÖSUNG IN ZWEI TEILEN
|
||||
1. `viewport-fit=cover` in jeder Seite (dort erledigt).
|
||||
2. Die Abstände hier einmal zentral benennen, statt sie an fünfzehn
|
||||
Stellen einzeln zu schreiben. Wer sie einzeln schreibt, vergisst
|
||||
eine — und dann liegt genau ein Knopf unter der Gestenleiste.
|
||||
|
||||
WARUM `max()` UND NICHT NUR `env()`
|
||||
Auf einem Gerät ohne Aussparung ist der Wert 0. Ein Kopfbereich mit
|
||||
0 Abstand klebt aber am oberen Rand. `max(env(...), <Mindestwert>)`
|
||||
gibt beiden Fällen ein brauchbares Ergebnis: Notch-Geräte bekommen
|
||||
den echten Abstand, alle anderen den normalen.
|
||||
===================================================================== */
|
||||
:root {
|
||||
--wd-sicher-oben: env(safe-area-inset-top, 0px);
|
||||
--wd-sicher-unten: env(safe-area-inset-bottom, 0px);
|
||||
--wd-sicher-links: env(safe-area-inset-left, 0px);
|
||||
--wd-sicher-rechts: env(safe-area-inset-right, 0px);
|
||||
}
|
||||
|
||||
/* Die Kopfzeile klebt oben (position: sticky). Im Browser sitzt sie
|
||||
unter der Adressleiste und braucht nichts. Installiert gibt es keine
|
||||
Adressleiste mehr — dann muss sie sich selbst unter die Statusleiste
|
||||
schieben, sonst steht die Marke hinter der Uhr. */
|
||||
.wd-kopf {
|
||||
padding-top: var(--wd-sicher-oben);
|
||||
}
|
||||
|
||||
/* Querformat: Bei gedrehtem Gerät liegt die Aussparung seitlich. Ohne
|
||||
diesen Abstand verschwindet die linke Spalte halb darunter. `92vw`
|
||||
allein hilft nicht — vw zählt die Aussparung mit. */
|
||||
.wd-container,
|
||||
.wd-container--schmal {
|
||||
padding-left: var(--wd-sicher-links);
|
||||
padding-right: var(--wd-sicher-rechts);
|
||||
}
|
||||
|
||||
/* Unten die Gestenleiste. Betrifft den Fußbereich und alles, was fest
|
||||
am unteren Rand sitzt. */
|
||||
.wd-fuss {
|
||||
padding-bottom: calc(1.5rem + var(--wd-sicher-unten));
|
||||
}
|
||||
|
||||
@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) {
|
||||
/* ------------------------------------------------------------------
|
||||
NUR IM INSTALLIERTEN BETRIEB
|
||||
|
||||
Installiert fehlt alles, was ein Browser sonst beisteuert: keine
|
||||
Adressleiste, kein Zurück-Knopf, kein Neuladen durch Herunterziehen
|
||||
im gewohnten Sinn. Was im Browser eine Kleinigkeit ist, wird hier
|
||||
zum Fehler.
|
||||
------------------------------------------------------------------ */
|
||||
|
||||
/* Das Gummiband-Nachfedern am Seitenende sieht in einer App nach
|
||||
einem Darstellungsfehler aus -- im Browser erwartet man es, in
|
||||
einer App nicht. Innerhalb scrollbarer Bereiche bleibt Scrollen
|
||||
natürlich unverändert. */
|
||||
html, body {
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
/* Der Hinweis "Als App installieren" ist installiert sinnlos. Er wird
|
||||
zwar schon per JavaScript unterdrückt -- aber nur, wenn das Skript
|
||||
lädt. Diese Regel greift auch dann, wenn es das nicht tut. */
|
||||
.wd-install { display: none !important; }
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
TIPP-VERHALTEN
|
||||
|
||||
Auf Android legt der Browser über jede angetippte Fläche ein graues
|
||||
Rechteck. Bei runden Kacheln und Knöpfen zeichnet es die eckige
|
||||
Trefferfläche nach und sieht nach einem Fehler aus. Ersetzt wird es
|
||||
nicht ersatzlos: Jeder Knopf hat einen sichtbaren :active-Zustand,
|
||||
sonst fehlte die Rückmeldung, dass der Tipp angekommen ist.
|
||||
--------------------------------------------------------------------- */
|
||||
.wd a, .wd button, .wd [role="button"], .wd summary, .wd label {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.wd .wd-btn:active,
|
||||
.wd .vw-ub-kachel:active,
|
||||
.wd .vw-ub-projekt:active,
|
||||
.wd .vw-filter-knopf:active {
|
||||
/* Kein Verschieben, nur ein kurzes Einsinken: Bewegung nach unten
|
||||
wird als Druck gelesen und braucht keine Farbe. */
|
||||
transform: scale(.985);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wd .wd-btn:active,
|
||||
.wd .vw-ub-kachel:active,
|
||||
.wd .vw-ub-projekt:active,
|
||||
.wd .vw-filter-knopf:active { transform: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user