Files
Webklar-Kundenbereich/test/knChatHoehe.test.js
T
ClaudeandClaude Opus 5.5 1a09bebe41 Kundenansicht neu: kein Hineinzoomen beim Tippen auf dem iPhone
Messung am iPhone: die Seite ist verkleinert gezeichnet (462 px Breite
auf 393 pt, visualViewport.scale 0,85, wohl Seitenzoom 85 %). Unsere
16-px-Felder haben auf dem Bildschirm dann nur 13,6 pt, iOS zoomt beim
Antippen auf 100 % hinein und danach nicht zurück: Ausschnitt, rechts
abgeschnitten, die Eingabe liegt hinter der Tastatur.

zoom-ausgleich.js setzt auf iOS bei einem Maßstab unter 0,99 die Klasse
kn-zoom-ausgleich und den Faktor 1,01/scale an <html>; huelle.css gibt
dann allen Textfeldern der Kundenansicht 16 px mal Faktor, also auf dem
Bildschirm wieder 16 pt. Nie umgestellt, während ein Feld den Fokus
hat. Bei 100 % ändert sich nichts (Chromium: pixelgleich zu main).
Die Messung meldet zusätzlich Maßstab (3 Stellen), Faktor, Seitenbreite
und Schriftgröße des Feldes im Fokus.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-29 11:30:56 +00:00

21 lines
1.4 KiB
JavaScript

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { lies, handyTeil } from './support/knHuelle.js'
// iPhone-App vom Home-Bildschirm (Messung 2026-10-29): ist die Seite im Chat kürzer als der Bildschirm, macht iOS 26 das Fenster rund 60 pt kleiner
// und die Leiste steht zu hoch. Am Handy muss die Spalte im Chat daher mindestens volle Bildschirmhöhe haben, wie in den anderen Bereichen.
test('huelle.css: am Handy hat die Spalte im Chat mindestens volle Höhe (100vh, dann 100lvh), am Desktop bleibt min-height 0', () => {
const css = lies('huelle.css')
const handy = handyTeil(css)
assert.match(handy, /\.kn-spalte:has\(#bereich-chat:not\(\[hidden\]\)\) \{ display: block; height: auto; min-height: 100vh; min-height: 100lvh; \}/)
const desktop = css.slice(0, css.indexOf('.kn-spalte:has(#bereich-chat:not([hidden])) { display: block'))
assert.match(desktop, /\.kn-spalte:has\(#bereich-chat:not\(\[hidden\]\)\) \{ display: flex;[^}]*min-height: 0; \}/)
assert.match(css, /\.kn-spalte \{ position: relative; min-height: 100vh;/)
})
test('huelle.js: der alte Höhen-Wächter (Hülle aus- und einblenden) ist weg, die Messung läuft nur am iPhone und nicht in der Mitarbeiter-Ansicht', () => {
const js = lies('huelle.js')
assert.doesNotMatch(js, /beobachteHoehe|'\.\/hoehe\.js'/)
assert.match(js, /if \(istIos\(\) && istHandy\(\) && !viewAs\) starteDiagHoehe\(\{ win, doc, zoom \}\)/)
})