Der Handy-Rundgang, den es fuer die Modis nie gab
Filipe: "mach einen kompletten check dass die app auf dem handy perfekt
funktioniert ... weil die modis haben schon probleme." Auf die
Rueckfrage: "einfach ALLES ABCHECKEN ALLES MOEGLICHE."
=== DER BEFUND, DER ALLES ERKLAERT ===
Es gibt seit dem 02.09. einen grossen Rundgang (pruef-grosscheck). Er
geht ueber jede Seite, zwei Bildschirmgroessen und VIER Rollen:
admin . manager . scout . creator
Vier von acht. Es fehlen modi, hand und gast -- also genau die drei
Rollen, die auf crew.dogfather-universe.com leben, und genau die, von
denen die Beschwerden kommen. Ihre Seiten waren nie im Ganzen auf einem
Handy durchgemessen worden.
Kein Vorwurf an den Rundgang: Er wurde fuers Agenturhaus gebaut, und
Team Dogi kam spaeter dazu. Aber es erklaert, warum Fehler dort
ueberleben konnten.
pruef-handy-teamdogi.mjs schliesst die Luecke: 4 Rollen x 2 Breiten x
bis zu 32 Seiten = 206 Seitenaufrufe, 91 052 Elemente, 3 880
Bedienelemente. Gemessen wird: kommt die Seite an, stuerzt etwas ab,
laeuft etwas ueber den Rand, ist Text abgeschnitten, kann man es
treffen, liegt etwas uebereinander, weiss man was es tut.
=== WAS ES GEFUNDEN HAT ===
DIE KOPFLEISTE WAR AUF JEDER SEITE ZU KLEIN. Bei Breiten bis 400 px
schrumpften alle Knoepfe auf 34x34, bis 560 px auf 36x36. Das sind zehn
Pixel unter dem, was ein Daumen sicher trifft -- und es betraf jede
Seite, jede Rolle, jeden Aufruf. Genau das erlebt man als "der Knopf
geht nicht".
Die Verkleinerung war nie noetig. Am echten Aufbau nachgemessen:
Breite belegt bei 44px noetig verfuegbar
360 px 237 284 328
390 px 237 284 358
412 px 245 284 380
Es passt ueberall, mit Luft. Jetzt 44x44 -- und dazu `flex-wrap: wrap`
als Regel statt einer dritten festen Zahl: Die Reihe bricht genau dann
um, wenn der Platz wirklich nicht reicht.
DER ZURUECK-KNOPF war 38x44 -- die Hoehe stimmte, die Breite nicht. Der
Rundgang hat ihn 192-mal gemeldet. Er ist der Knopf, den man auf jeder
Unterseite am haeufigsten trifft.
DIE KLEINEN UMSCHALTER (38 px) waren eine begruendete Ausnahme --
begruendet fuer die Maus. Auf Geraeten, die mit dem Finger bedient
werden, gilt jetzt 44. Gefragt wird `pointer: coarse` und nicht die
Breite: Ein schmales Browserfenster am Rechner braucht keine 44 px, ein
1200 px breites Tablet sehr wohl.
DIE KALENDERPILLEN waren 26 px hoch, das Rechtefeld 34 px breit, die
Kalenderpfeile 38 px. Alle auf 44.
EINE BESCHRIFTUNG HING NICHT AM FELD. In checkliste.js stand ein
<label> ohne `for` neben einem <select> ohne `id`. Optisch richtig --
fuer ein Vorleseprogramm ein namenloses Feld. Und weil wahl.js das
Systemmenue durch einen eigenen Knopf ersetzt und dessen Namen AUS DEM
LABEL holt, blieb auch der Knopf namenlos.
=== DREI FEHLER IN MEINER EIGENEN PRUEFUNG ===
Und sie sind der lehrreichere Teil.
(1) DER ERSTE LAUF MELDETE EIN 1647 px BREITES BILD auf einem 390 px
breiten Schirm. Das sah nach dem Fund des Tages aus. Es war einer
in MEINER Pruefung: `dogfather-universe.com` steht in der fest
eingebauten HSTS-Liste von Chromium, der Browser schaltet
unabaenderlich auf https um, und mein Testserver sprach http.
Ergebnis: JEDE Stilvorlage schlug fehl. Gemessen wurde eine Seite
ganz ohne CSS.
Haette ich den Befund gemeldet statt nachzusehen, waere ein halber
Tag in eine Reparatur geflossen, die nichts repariert. Die Pruefung
spricht jetzt selbst https, mit eigenem Zertifikat und einem
winzigen Vorbau.
(2) 350 FEHLALARME. `span.zurueck-knopf__text` wurde 192-mal als
abgeschnitten gemeldet, `span.teilen__text` 154-mal -- beide sind
ABSICHTLICH 1 px gross und weggeschnitten, damit ein
Vorleseprogramm sie liest und das Auge nicht. Dazu 24-mal
`-webkit-line-clamp` (gewolltes Kuerzen auf zwei Zeilen), 14-mal
Textfelder MIT Beschriftung (ich fragte `labels` nur bei input und
select, nicht bei textarea) und 26-mal Zierrat mit
`aria-hidden="true"`.
Eine Warnung, die immer kommt, ist keine Warnung mehr -- und diese
haetten jeden echten Fund zugedeckt.
(3) DIE UEBERLAUF-MESSUNG WAR BLIND. Sie rechnete
`scrollWidth - clientWidth`; `body { overflow-x: hidden }` macht
beide Werte immer gleich. Die Pruefung fand nichts und meldete
trotzdem gruen. Gefunden hat das die GEGENPROBE -- sie ist genau
dafuer da. Jetzt zaehlt, ob ein sichtbares Element ueber den
rechten Rand ragt.
=== UND EIN FEHLER BEIM AUFRAEUMEN ===
Beim Verschieben der Touch-Regeln von start.css nach module.css hat ein
NICHT-GIERIGES Suchmuster am ersten `}` am Zeilenanfang aufgehoert und
dabei mehr mitgenommen als gemeint: die Schriftgroessen-Regeln fuer
schmale Fenster. Die haetten danach nur noch auf Geraeten mit Finger
gegolten.
Gefunden hat es wieder der Rundgang, nicht das Lesen: `.k-pille` blieb
26 px hoch, obwohl die neue Regel 44 sagte -- die alte stand weiter
unten und gewann. Zurueckgeholt aus HEAD, an ihren Platz gesetzt.
Nebenbei kam dabei heraus, WARUM eine Regel nicht ankam: Jede Seite
laedt gate -> start -> seite -> module -> haus. `aufgaben.css` setzt
`.schnitt { min-height: 38px }` mit derselben Staerke, kommt aber
spaeter. Eine Regel, die man geschrieben hat und die nicht wirkt, sieht
im Editor genauso aus wie eine, die wirkt.
=== STAND ===
Befunde: 120 -> 64.
Weg sind: alle abgeschnittenen Texte (0), alle namenlosen
Bedienelemente (0), alle zu kleinen Knoepfe in Kopfleiste, Zurueck-Weg,
Filterreihen, Kalender.
Es bleiben 64, und sie sind alle von derselben Sorte: 48-mal der
Ersatzknopf eines Auswahlfeldes (34-42 px breit, aber 44 hoch), 8-mal
Kalenderpillen (36-39 breit, 44 hoch), 8 Ueberstaende. Alle sind in der
HOEHE gross genug und nur in der Breite knapp -- die komfortable
Empfehlung, nicht die Mindestanforderung. Sie stehen namentlich im
Prueflauf und sind der naechste Schritt.
GEMESSEN: pruef-css-klassen ALLES IN ORDNUNG, pruef-meldungen 8/0,
pruef-rechtetafel 19/0, pruef-turn-wege 15/0, und beide Gegenproben des
neuen Rundgangs schlagen an.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -319,6 +319,32 @@ body.gate {
|
||||
|
||||
.buehne { position: fixed; inset: 0; z-index: 0; }
|
||||
|
||||
/* DAS <picture> BEKOMMT EINE EIGENE GRÖSSE (19.09.2026)
|
||||
|
||||
`<picture>` ist von Haus aus ein INLINE-Element ohne eigene Breite --
|
||||
es richtet sich nach seinem Inhalt. Das `width: 100%` am Bild bezieht
|
||||
sich damit auf etwas, das sich selbst nach dem Bild richtet. Als
|
||||
Block mit `inset: 0` sitzt es dagegen sauber im Rahmen der Bühne,
|
||||
und `object-fit: cover` schneidet den Ausschnitt zu, der gemeint ist.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
EHRLICHKEIT ZUR HERKUNFT DIESER REGEL
|
||||
|
||||
Hier stand zuerst eine lange Begründung mit einer Messung: „1647 px
|
||||
breites Bild auf einem 390 px breiten Schirm". Diese Messung war
|
||||
FALSCH -- sie stammte aus einem Prüflauf, in dem wegen einer
|
||||
erzwungenen https-Umleitung überhaupt keine Stilvorlage geladen
|
||||
wurde. Gemessen wurde eine Seite ganz ohne CSS.
|
||||
|
||||
Die Regel selbst bleibt trotzdem richtig, und sie bleibt deshalb
|
||||
stehen. Aber die Begründung ist ausgetauscht: Ein Kommentar, der eine
|
||||
Zahl nennt, die nie stimmte, ist schlimmer als keiner -- der Nächste
|
||||
liest ihn und glaubt ihm. */
|
||||
.buehne picture {
|
||||
display: block;
|
||||
position: absolute; inset: 0;
|
||||
}
|
||||
|
||||
.buehne__bild {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
@@ -497,3 +497,65 @@
|
||||
.dran__zahl::before { display: none; }
|
||||
.tagesblick__seite--heute::before { background: CanvasText; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
TIPPZIELE AUF GERÄTEN, DIE MIT DEM FINGER BEDIENT WERDEN
|
||||
(19.09.2026)
|
||||
|
||||
Diese Regel stand zuerst in `start.css` — und griff nicht. Der Grund
|
||||
ist die Ladereihenfolge: Jede Seite lädt `gate → start → seite →
|
||||
module → haus`. `aufgaben.css` setzt `.schnitt { min-height: 38px }`
|
||||
mit derselben Stärke, kommt aber SPÄTER und gewinnt damit.
|
||||
|
||||
Gefunden hat das nicht das Lesen, sondern der Rundgang: Nach der
|
||||
Änderung meldete er `.schnitt` unverändert mit 38 px. Eine Regel, die
|
||||
man geschrieben hat und die nicht ankommt, sieht im Editor genauso
|
||||
aus wie eine, die wirkt.
|
||||
|
||||
`module.css` ist die vorletzte Datei und schlägt damit jede
|
||||
Seitendatei. `haus.css` bleibt die letzte — dort geht es um Farben
|
||||
des Hauses, nicht um Maße.
|
||||
|
||||
WARUM `pointer: coarse` UND NICHT EINE BREITE: Die Frage ist nicht,
|
||||
wie breit der Bildschirm ist, sondern womit jemand tippt. Ein
|
||||
schmales Browserfenster am Rechner wird mit der Maus bedient und
|
||||
braucht keine 44 px; ein 1200 px breites Tablet sehr wohl. Eine
|
||||
Breite hätte beide Fälle falsch beantwortet.
|
||||
===================================================================== */
|
||||
@media (pointer: coarse) {
|
||||
.filterreihe__knopf, .k-chip, .k-ansicht, .marke-tag, .tag-knopf,
|
||||
.schnitt, .creator-knopf, .tagzeile__knopf, .starthilfe__beispiel,
|
||||
.t-kuemmern__knopf, .bw-kuemmern__knopf, .wecker-knopf, .wahl2__knopf {
|
||||
min-height: 44px;
|
||||
}
|
||||
/* Die Kalenderpfeile und das Rechtefeld waren zu SCHMAL, nicht zu
|
||||
niedrig -- 38 bzw. 34 px. Ein Pfeil, den man nicht trifft, blättert
|
||||
nicht. */
|
||||
#zurueck-zeit, #vor-zeit, .rechte-feld, .k-pfeil {
|
||||
min-width: 44px; min-height: 44px;
|
||||
}
|
||||
/* Nachgetragen nach dem zweiten Lauf -- der Rundgang hat sie einzeln
|
||||
benannt, statt dass ich sie hätte raten müssen. */
|
||||
.knopf, .k-pille { min-height: 44px; }
|
||||
.k-pille { display: inline-flex; align-items: center; }
|
||||
/* Der Ersatzknopf der Auswahlfelder ist `width: 100%` -- in einer
|
||||
schmalen Spalte wird er damit 34 px breit. Lieber einmal über den
|
||||
Rand als dauerhaft nicht zu treffen. */
|
||||
/* AN DER HUELLE, NICHT AM KNOPF (berichtigt 19.09.2026).
|
||||
|
||||
Erst stand hier nur `.wahl2__knopf { min-width: 44px }` -- und der
|
||||
Knopf blieb 34 px. Der Grund liegt eine Ebene hoeher: start.css
|
||||
setzt auf dem Handy `.wahl2 { min-width: 0 }`, damit schmale
|
||||
Geraete nicht waagerecht schieben muessen. Die Huelle schrumpft
|
||||
also auf 34 px, und der Knopf darin ist `width: 100%`.
|
||||
|
||||
Eine Mindestbreite am Kind gegen eine Null am Elternteil ist ein
|
||||
Kampf, den das Kind nicht gewinnt. Also bekommt die Huelle ihre
|
||||
44 px -- und der Knopf folgt von selbst. Die urspruengliche
|
||||
Absicht (kein waagerechtes Schieben) bleibt gewahrt: 44 px ist
|
||||
schmaler als jedes Feld vorher. */
|
||||
.wahl2, .wahl2__knopf { min-width: 44px; }
|
||||
/* Und die Filterknoepfe waren 41 statt 44 breit -- drei Pixel, die
|
||||
der Rundgang sechsmal gemeldet hat. */
|
||||
.filterreihe__knopf, .k-chip { min-width: 44px; }
|
||||
}
|
||||
|
||||
+115
-34
@@ -1913,7 +1913,12 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Handy 65 px, die dem Abmelden-Knopf fehlen. Vorlesende Programme
|
||||
verlieren nichts: Der Text bleibt im Dokument und wird nur
|
||||
unsichtbar gerechnet. */
|
||||
.zurueck-knopf { padding: 9px 12px 9px 11px; }
|
||||
/* 44 PIXEL BREIT (19.09.2026). Gemessen war er 38x44 -- die Hoehe
|
||||
stimmte, die Breite nicht, und er ist der Knopf, den man auf jeder
|
||||
Unterseite am haeufigsten trifft. Sechs Pixel klingen nach nichts;
|
||||
sie sind der Unterschied zwischen „geht" und „muss man zweimal
|
||||
tippen". Der Rundgang hat ihn 192-mal gemeldet. */
|
||||
.zurueck-knopf { padding: 9px 12px 9px 11px; min-width: 44px; justify-content: center; }
|
||||
.zurueck-knopf__text {
|
||||
position: absolute; width: 1px; height: 1px;
|
||||
margin: -1px; padding: 0; overflow: hidden;
|
||||
@@ -2978,43 +2983,77 @@ body.start #protokoll {
|
||||
font-size: 16px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
/* Kleine Umschalter dürfen niedriger sein, brauchen aber Breite. */
|
||||
/* KLEINE UMSCHALTER DURFTEN NIEDRIGER SEIN -- BIS ZUM 19.09.2026.
|
||||
|
||||
Der Satz „Kleine Umschalter dürfen niedriger sein" stand hier mit
|
||||
gutem Grund: Eine Reihe aus acht Filterknöpfen wird unübersichtlich,
|
||||
wenn jeder 44 px hoch ist.
|
||||
|
||||
Der erste Handy-Rundgang hat den Grund trotzdem überstimmt. Er
|
||||
meldete diese Knöpfe 68-mal als zu klein, über alle Rollen und beide
|
||||
Breiten -- und dazu kam die Rückmeldung, die alles entscheidet: Die
|
||||
Modis kommen nicht klar. Bei 38 px trifft man mit dem Daumen
|
||||
daneben, und zwar genau dann, wenn man in Eile ist.
|
||||
|
||||
Am Rechner bleibt es bei 38: Dort zeigt eine Maus auf den Pixel
|
||||
genau, und die Reihe soll kompakt bleiben. Die Vergrößerung gilt
|
||||
deshalb NUR für Geräte, die wirklich mit dem Finger bedient werden
|
||||
-- `pointer: coarse` fragt genau das, statt es aus der Breite zu
|
||||
raten. Ein 1200 px breites Tablet wird damit richtig behandelt, ein
|
||||
schmales Browserfenster am Rechner auch. */
|
||||
.filterreihe__knopf, .k-chip, .k-ansicht, .marke-tag, .tag-knopf {
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
/* --- Schriftgroessen ------------------------------------------------
|
||||
Alles unter 11,5 px hochgezogen. Die Rollenmarke in der Kopfleiste
|
||||
lag bei 10,56 px, die Bereichszeile bei 10,88 px, die Uhrzeiten im
|
||||
Kalender bei 9,6 px. */
|
||||
.wer__rolle, .kopf-zeile .marke, .willkommen .marke,
|
||||
.feldschild, .marke, .gruppe__unter, .kachel__unter {
|
||||
font-size: .75rem;
|
||||
}
|
||||
/* .75rem statt .7rem (19.09.2026): .7rem sind 11,2 px -- also 0,3 px
|
||||
UNTER der Grenze, die 33 Zeilen weiter oben aufgestellt wird.
|
||||
Die Regel, die zu kleine Schrift hochziehen soll, zog sie auf
|
||||
einen Wert, der selbst zu klein ist. team.css hat genau diesen
|
||||
Fehler fuer .tampel__tag schon einmal korrigiert. */
|
||||
.k-pille, .k-anlass { font-size: .75rem; }
|
||||
.k-tag__heute, .k-anlasskarte__rest small,
|
||||
.k-anlasskarte__rest, .zahl__schild, .karte__zeile {
|
||||
font-size: .72rem;
|
||||
}
|
||||
small, .leise { font-size: .78rem; }
|
||||
/* ZURUECKGEHOLT AM 19.09.2026.
|
||||
|
||||
/* --- Kalenderpillen -------------------------------------------------
|
||||
Sie waren 15 px hoch -- als Ziel zu klein und als Text zu eng. Auf
|
||||
dem Handy bekommen sie Luft; dass dann weniger in eine Zelle passt,
|
||||
ist richtig so: Der volle Tag steht im Tagesdialog. */
|
||||
.k-pille, .k-anlass {
|
||||
min-height: 26px;
|
||||
display: flex; align-items: center;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.k-tag { min-height: 92px; }
|
||||
Diese Regeln standen hier und sind beim Verschieben der
|
||||
Touch-Regeln nach module.css versehentlich mitgewandert: Ein
|
||||
nicht-gieriges Suchmuster hoerte am ersten `}` am Zeilenanfang
|
||||
auf und nahm dabei mehr mit als gemeint.
|
||||
|
||||
Folge waere gewesen, dass die Schriftgroessen fuer schmale
|
||||
Fenster nur noch auf Geraeten mit Finger gelten -- ein schmales
|
||||
Fenster am Rechner haette wieder die zu kleine Schrift bekommen.
|
||||
|
||||
Gefunden hat es der Rundgang, nicht das Lesen: `.k-pille` blieb
|
||||
26 px hoch, obwohl die neue Regel 44 sagte. Die alte stand in
|
||||
derselben Datei weiter unten und gewann.
|
||||
|
||||
Sie gehoeren an die BREITE, nicht an die Bedienart. */
|
||||
/* --- Schriftgroessen ------------------------------------------------
|
||||
Alles unter 11,5 px hochgezogen. Die Rollenmarke in der Kopfleiste
|
||||
lag bei 10,56 px, die Bereichszeile bei 10,88 px, die Uhrzeiten im
|
||||
Kalender bei 9,6 px. */
|
||||
.wer__rolle, .kopf-zeile .marke, .willkommen .marke,
|
||||
.feldschild, .marke, .gruppe__unter, .kachel__unter {
|
||||
font-size: .75rem;
|
||||
}
|
||||
/* .75rem statt .7rem (19.09.2026): .7rem sind 11,2 px -- also 0,3 px
|
||||
UNTER der Grenze, die 33 Zeilen weiter oben aufgestellt wird.
|
||||
Die Regel, die zu kleine Schrift hochziehen soll, zog sie auf
|
||||
einen Wert, der selbst zu klein ist. team.css hat genau diesen
|
||||
Fehler fuer .tampel__tag schon einmal korrigiert. */
|
||||
.k-pille, .k-anlass { font-size: .75rem; }
|
||||
.k-tag__heute, .k-anlasskarte__rest small,
|
||||
.k-anlasskarte__rest, .zahl__schild, .karte__zeile {
|
||||
font-size: .72rem;
|
||||
}
|
||||
small, .leise { font-size: .78rem; }
|
||||
|
||||
/* --- Kalenderpillen -------------------------------------------------
|
||||
Sie waren 15 px hoch -- als Ziel zu klein und als Text zu eng. Auf
|
||||
dem Handy bekommen sie Luft; dass dann weniger in eine Zelle passt,
|
||||
ist richtig so: Der volle Tag steht im Tagesdialog. */
|
||||
.k-pille, .k-anlass {
|
||||
min-height: 26px;
|
||||
display: flex; align-items: center;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.k-tag { min-height: 92px; }
|
||||
}
|
||||
|
||||
|
||||
/* Auf sehr schmalen Geraeten (320 px, iPhone SE) wird zusaetzlich alles
|
||||
Mehrspaltige einspaltig. Zwei Spalten auf 288 px Inhaltsbreite sind
|
||||
keine zwei Spalten mehr, sondern zwei Streifen. */
|
||||
@@ -7967,7 +8006,23 @@ body.start .k-leiste .feldschild::after {
|
||||
= 172 plus vier Abstände zu 6 = 196, verfügbar 249.
|
||||
===================================================================== */
|
||||
@media (max-width: 560px) {
|
||||
.kopfleiste__rechts { gap: 6px; }
|
||||
/* DAS SICHERHEITSNETZ (19.09.2026).
|
||||
|
||||
Im Haus sind schon zweimal Umbrüche auf eine feste Zahl gerechnet
|
||||
worden -- und beide Male kam später ein Knopf dazu, den die Zahl
|
||||
nicht kannte. Beim zweiten Mal lag der Sicht-Umschalter quer über
|
||||
dem Chat-Knopf, und wer auf „Meine Sicht" tippte, landete im Chat.
|
||||
|
||||
Statt einer dritten Zahl hier eine REGEL: Die Reihe darf umbrechen.
|
||||
Sie tut es genau dann, wenn der Platz wirklich nicht reicht -- und
|
||||
nie, solange er reicht. Ein Kopf, der eine Zeile höher wird, ist
|
||||
unangenehm; zwei Knöpfe übereinander sind ein Fehler.
|
||||
|
||||
Dazu darf die Marke schrumpfen (min-width: 0), damit die Knöpfe
|
||||
ihre Größe behalten und nicht sie als Erstes nachgeben. */
|
||||
.kopfleiste__rechts { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.kopfleiste .marke { min-width: 0; }
|
||||
.kopfleiste .marke__text { overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* Alle Zeichen-Knöpfe auf ein Maß. 36 px ist knapp über der Grenze,
|
||||
ab der man danebentippt, und lässt vier davon nebeneinander. */
|
||||
@@ -7986,7 +8041,29 @@ body.start .k-leiste .feldschild::after {
|
||||
und das fuenfte kam spaeter dazu. */
|
||||
.kopfleiste__rechts > .glocke,
|
||||
.kopfleiste__rechts > .abmelden {
|
||||
width: 36px; min-width: 36px; height: 36px; min-height: 36px;
|
||||
/* 44 STATT 36 PIXEL (19.09.2026) — und das ist NACHGEMESSEN, nicht
|
||||
gerechnet.
|
||||
|
||||
Der erste Handy-Rundgang über die Team-Dogi-Adresse meldete auf
|
||||
JEDER Seite dieselben drei bis fünf Knöpfe als zu klein. Das ist
|
||||
genau das, was ein Mensch als „der Knopf geht nicht" erlebt: Man
|
||||
tippt, trifft daneben, und nichts passiert.
|
||||
|
||||
Die Verkleinerung war ein Platzsparen, das nie nötig war. Am
|
||||
echten Aufbau gemessen (Marke, Teilen, Chat, Suche, Wer,
|
||||
Abmelden):
|
||||
|
||||
Breite belegt bei 44px nötig verfügbar
|
||||
360 px 237 284 328
|
||||
390 px 237 284 358
|
||||
412 px 245 284 380
|
||||
|
||||
Es passt auf jedem Gerät, mit Luft. Die 36 px waren Vorsicht vor
|
||||
einem Platzmangel, den es nicht gibt.
|
||||
|
||||
44 px ist keine gegriffene Zahl: Es ist das Maß, das ein Daumen
|
||||
sicher trifft, und der Wert, den die Richtlinie dafür nennt. */
|
||||
width: 44px; min-width: 44px; height: 44px; min-height: 44px;
|
||||
padding: 0; gap: 0;
|
||||
display: inline-grid; place-items: center;
|
||||
}
|
||||
@@ -8104,7 +8181,11 @@ body.start .k-leiste .feldschild::after {
|
||||
.kopfleiste__rechts > .abmelden,
|
||||
.kopfleiste__rechts > .glocke,
|
||||
.sicht {
|
||||
width: 34px; min-width: 34px; height: 34px; min-height: 34px;
|
||||
/* AUCH HIER 44 (19.09.2026). Bei 360 px war das der engste Fall
|
||||
der Messung -- und selbst dort bleiben 44 px übrig. Ein Knopf,
|
||||
den man nicht trifft, spart keinen Platz, er kostet einen
|
||||
Versuch. */
|
||||
width: 44px; min-width: 44px; height: 44px; min-height: 44px;
|
||||
}
|
||||
/* Der Buchstabe braucht auch hier seine 12 px daneben. */
|
||||
.sicht[data-fremd="ja"] { width: 46px; min-width: 46px; }
|
||||
|
||||
Reference in New Issue
Block a user