iPhone-Symbole: quadratisch und deckend statt abgerundet

Gemeldet: "auf dem pc und auf dem handy soll alles funktionieren, auf dem einen klappt es und auf dem anderen nicht." Der Grund ist, dass PC und Handy ihr Symbol an drei verschiedenen Stellen holen -- und jede stellt andere Anforderungen: Browser-Reiter das normale Symbol, runde Ecken erlaubt Android die maskable-Fassung, aussen wird beschnitten iPhone <link rel=apple-touch-icon> -- und iOS rundet SELBST ab und fuellt alles Durchsichtige mit SCHWARZ Unser 180er brachte seine eigene Rundung mit, also durchsichtige Ecken. Auf dem iPhone wurden daraus schwarze Zipfel, die dann ein zweites Mal beschnitten wurden. Auf dem PC sieht dieselbe Datei tadellos aus -- genau daher der Unterschied zwischen den Geraeten. Jetzt wird die 180er-Fassung randvoll und deckend gebaut. Nachgemessen an allen zehn: 0,00 Prozent durchsichtig, Ecken voll deckend. Die normale Fassung bleibt abgerundet (4,75 Prozent) -- auch das gemessen, damit der Fix nicht die andere Seite kaputtmacht. Dazu eine Pruefung in pruef-struktur.mjs: alle sechs Groessen je App vorhanden, und jede Seite nennt beide Symbolarten. Fehlt das iPhone-Symbol, nimmt iOS einen Bildschirmausschnitt der Seite. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-05 12:46:32 +02:00
parent e9709a5aa8
commit 8759a46e5b
12 changed files with 80 additions and 5 deletions
@@ -341,6 +341,66 @@ console.log(`
      : `alle ${hinterWand.length} stehen in der Ausnahmeliste`);
 }

+/* ---------- 10. Sind die Symbole fuer JEDES Geraet richtig gebaut? -------
+
+   PC und Handy holen ihr Symbol an drei verschiedenen Stellen, und
+   jede stellt andere Anforderungen:
+
+     Browser-Reiter   das normale Symbol, darf runde Ecken haben
+     Android          die maskable-Fassung, davon wird aussen bis zu
+                      ein Fuenftel weggeschnitten
+     iPhone           <link rel="apple-touch-icon"> -- und iOS rundet
+                      SELBST ab und fuellt alles Durchsichtige mit
+                      SCHWARZ
+
+   Der letzte Punkt ist der, der auffiel ("auf dem einen klappt es und
+   auf dem anderen nicht"): Ein apple-touch-icon mit eigener Rundung
+   bekommt auf dem iPhone schwarze Zipfel. Auf dem PC sieht dieselbe
+   Datei tadellos aus -- deshalb faellt es nur auf einem der beiden
+   Geraete auf, und deshalb muss es gemessen werden statt angesehen.
+
+   Geprueft werden die Dateinamen, nicht die Bilder selbst -- die
+   Bildpruefung braucht einen Browser und laeuft in pruef-symbole.mjs.
+   Hier geht es darum, dass ueberhaupt fuer jede App und jedes Geraet
+   eine Datei da ist. */
+console.log(`
+=== Symbole fuer alle Geraete ===`);
+{
+  const symOrdner = join(REPO, "assets", "img", "app-symbole");
+  if (!existsSync(symOrdner)) {
+    ok(false, "der Ordner assets/img/app-symbole fehlt");
+  } else {
+    const da = readdirSync(symOrdner);
+    const apps = [...new Set(da.map((n) => n.replace(/-(\d+)(-maskable)?\.png$/, "")))]
+      .filter((n) => n.endsWith(".png") === false);
+    ok(apps.length >= 8, `${apps.length} Apps mit eigenen Symbolen`);
+
+    const noetig = ["192", "512", "192-maskable", "512-maskable", "180", "32"];
+    const fehlend = [];
+    for (const a of apps) {
+      for (const g of noetig) {
+        if (!da.includes(`${a}-${g}.png`)) fehlend.push(`${a}-${g}.png`);
+      }
+    }
+    ok(fehlend.length === 0,
+      fehlend.length ? `fehlende Symbole: ${fehlend.slice(0, 6).join(", ")}`
+        : `alle ${apps.length * noetig.length} Symbole vorhanden `
+          + `(Reiter, Android-maskable, iPhone)`);
+
+    /* Jede Seite muss BEIDES nennen: das Reiter-Symbol und das fuers
+       iPhone. Fehlt das zweite, nimmt iOS einen Bildschirmausschnitt
+       der Seite -- unbrauchbar und unerkennbar. */
+    let ohneApple = [];
+    for (const seite of seiten) {
+      const text = readFileSync(join(WS, seite), "utf8");
+      if (!/rel="apple-touch-icon"/i.test(text)) ohneApple.push(seite);
+    }
+    ok(ohneApple.length === 0,
+      ohneApple.length ? `ohne apple-touch-icon (iPhone nimmt sonst einen Screenshot): ${ohneApple.join(", ")}`
+        : `alle ${seiten.length} Workspace-Seiten nennen ein iPhone-Symbol`);
+  }
+}
+
 /* ---------- Gegenprobe --------------------------------------------------- */

 console.log(`\n=== Gegenprobe (muss anschlagen) ===`);