diff --git a/server/mess-chat-optik.mjs b/server/mess-chat-optik.mjs
index 7a655a71..b9953234 100644
--- a/server/mess-chat-optik.mjs
+++ b/server/mess-chat-optik.mjs
@@ -155,7 +155,17 @@ const browser = await pw.chromium.launch({
const MARKE = process.env.MARKE || "jetzt";
try {
for (const [wie, breite, hoehe] of [["computer", 1440, 980], ["handy", 412, 915]]) {
- const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
+ /* MIT FINGER, WENN ES EIN HANDY IST.
+ Ohne `hasTouch` meldet der Browser `pointer: fine` -- und
+ damit greift KEINE Regel aus `@media (pointer: coarse)`.
+ Dort stehen im ganzen Haus die 44-Pixel-Beruehrziele und
+ seit dem 28.09. auch das Ausblenden der Tastenkuerzel. Eine
+ Handy-Messung mit Mauszeiger zeigt eine Seite, die auf
+ keinem Handy so aussieht. */
+ const kontext = await browser.newContext({
+ viewport: { width: breite, height: hoehe },
+ hasTouch: breite <= 860,
+ });
await kontext.addCookies(keks.split("; ").map((k) => {
const [n, ...r] = k.split("=");
return { name: n, value: r.join("="), domain: CREW, path: "/" };
@@ -193,6 +203,46 @@ try {
await seite.screenshot({ path: `server/mess-chat-${MARKE}-${wie}-verlauf.png` });
if (konsole.length) console.log(" FEHLER IN DER KONSOLE:", konsole);
console.log(` Bilder: server/mess-chat-${MARKE}-${wie}-{liste,verlauf}.png`);
+ if (breite <= 860) {
+ /* WIE VIELE BRECHEN UM -- nicht „die erste".
+ `querySelector` nimmt die erste Fusszeile, und wie breit
+ die ist, haengt vom Text darueber ab: Bei einer kurzen
+ Nachricht ist die Blase schmal, bei einer langen breit.
+ Gemessen an der ersten sah eine Aenderung deshalb mal
+ besser und mal schlechter aus, ohne dass sich etwas
+ geaendert hatte. Gefragt ist, wie viele Nachrichten
+ betroffen sind. */
+ const fuss = await seite.evaluate(() => {
+ const alle = [...document.querySelectorAll(".chat-nachricht__fuss")]
+ .map((f) => {
+ const kinder = [...f.children].map((e) => e.getBoundingClientRect());
+ /* DIE BREITESTE ZEILE, NICHT DIE SUMME. Seit die Uhrzeit
+ absichtlich in einer eigenen Zeile steht, waere eine
+ Summe ueber alle Kinder die Breite zweier Zeilen
+ uebereinander -- sie meldete 444 px in einer 234 px
+ breiten Fusszeile und sah wie ein Ueberlauf aus. */
+ const nach = new Map();
+ for (const q of kinder) {
+ const y = Math.round(q.top);
+ nach.set(y, (nach.get(y) || 0) + Math.round(q.width));
+ }
+ return { zeilen: nach.size, hoch: Math.round(f.getBoundingClientRect().height),
+ platz: Math.round(f.getBoundingClientRect().width),
+ inhalt: Math.max(...nach.values()) };
+ });
+ if (!alle.length) return null;
+ const um = alle.filter((x) => x.zeilen > 1);
+ return { gesamt: alle.length, um: um.length,
+ schlimmste: alle.reduce((a2, x) => (x.zeilen > a2.zeilen ? x : a2), alle[0]),
+ hoehe: Math.round(alle.reduce((a2, x) => a2 + x.hoch, 0) / alle.length) };
+ });
+ if (fuss) {
+ console.log(` Handgriffe: ${fuss.um} von ${fuss.gesamt} Fusszeilen brechen um, `
+ + `im Schnitt ${fuss.hoehe} px hoch`);
+ console.log(` schlimmste: ${fuss.schlimmste.zeilen} Zeilen, `
+ + `Platz ${fuss.schlimmste.platz} px, Inhalt ${fuss.schlimmste.inhalt} px`);
+ }
+ }
await kontext.close();
}
} finally {
diff --git a/server/mess-notizblock.mjs b/server/mess-notizblock.mjs
index 05cc7005..0e28d996 100644
--- a/server/mess-notizblock.mjs
+++ b/server/mess-notizblock.mjs
@@ -225,8 +225,24 @@ await seite.waitForTimeout(1200);
await seite.screenshot({ path: "server/mess-notizblock-rechner.png" });
console.log("server/mess-notizblock-rechner.png");
-const handy = await kontext.newPage();
-await handy.setViewportSize({ width: 390, height: 844 });
+/* EIN EIGENER KONTEXT MIT FINGER.
+ `setViewportSize` aendert nur die Groesse -- `hasTouch` gehoert
+ zum KONTEXT und laesst sich danach nicht mehr setzen. Ohne ihn
+ meldet der Browser `pointer: fine`, und keine einzige Regel aus
+ `@media (pointer: coarse)` greift; dort stehen im ganzen Haus
+ die 44-Pixel-Beruehrziele. Ein Handy-Bild mit Mauszeiger zeigt
+ eine Seite, die auf keinem Handy so aussieht. */
+const handyKontext = await browser.newContext({
+ viewport: { width: 390, height: 844 },
+ hasTouch: true,
+ ignoreHTTPSErrors: true,
+ deviceScaleFactor: 2,
+});
+await handyKontext.addCookies(kekse.modi.split("; ").filter(Boolean).map((k) => {
+ const [n, ...r] = k.split("=");
+ return { name: n, value: r.join("="), domain: CREW, path: "/" };
+}));
+const handy = await handyKontext.newPage();
await handy.goto(`${BASIS}/workspace/notizen.html`, { waitUntil: "networkidle" });
await handy.waitForTimeout(900);
await handy.screenshot({ path: "server/mess-notizblock-handy-liste.png" });
diff --git a/workspace/anruf-probe.html b/workspace/anruf-probe.html
index 7dec16d9..496474f0 100644
--- a/workspace/anruf-probe.html
+++ b/workspace/anruf-probe.html
@@ -16,8 +16,8 @@
verdeckt. Gefunden hat es pruef-struktur.
Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. -->
-
-
+
+
-
+