ClaudeandClaude Opus 5.5
1a09bebe41
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>
39 lines
2.0 KiB
JavaScript
39 lines
2.0 KiB
JavaScript
/* Kundenansicht neu: iOS zoomt beim Antippen eines Feldes hinein, wenn dessen Schrift auf dem Bildschirm kleiner als 16 pt ist, und zoomt danach
|
|
nicht zurück: man sieht nur noch einen Ausschnitt, rechts ist alles abgeschnitten, die Eingabe liegt hinter der Tastatur. Unsere Felder haben am
|
|
Handy 16 px. Ist die Seite aber verkleinert gezeichnet (Seitenzoom in Safari unter 100 %; gemessen am iPhone 2026-10-29: 85 %,
|
|
visualViewport.scale 0,85), sind das auf dem Bildschirm nur 13,6 pt. Dann bekommen alle Textfelder so viel größere Schrift, dass sie auf dem
|
|
Bildschirm wieder 16 pt hat: Klasse kn-zoom-ausgleich und Faktor --kn-zoom-ausgleich an <html>, die Regel steht in huelle.css. Bei 100 % passiert nichts. */
|
|
|
|
/** Faktor für die Feldschrift beim Maßstab `scale`; 1 = kein Ausgleich (100 % oder hineingezoomt). 1 % Luft gegen Rundung, auf drei Stellen. */
|
|
export function ausgleichFaktor(scale) {
|
|
if (!Number.isFinite(scale) || scale <= 0 || scale >= 0.99) return 1
|
|
return Math.ceil((1.01 / scale) * 1000) / 1000
|
|
}
|
|
|
|
/**
|
|
* Stellt den Faktor beim Start und bei jeder Maßstabsänderung (visualViewport resize) ein, nie während ein Textfeld den Fokus hat
|
|
* (iOS hat dann schon entschieden). Rückgabe { faktor, beende }.
|
|
*/
|
|
export function beobachteZoom({ win = window, doc = document, istTextfeld = () => false }) {
|
|
const vv = win.visualViewport
|
|
if (!vv) return { faktor: () => 1, beende() {} }
|
|
const wurzel = doc.documentElement
|
|
let faktor = 1
|
|
const setze = () => {
|
|
if (istTextfeld(doc.activeElement)) return
|
|
const neu = ausgleichFaktor(vv.scale)
|
|
if (neu === faktor) return
|
|
faktor = neu
|
|
if (faktor === 1) {
|
|
wurzel.classList.remove('kn-zoom-ausgleich')
|
|
wurzel.style.removeProperty('--kn-zoom-ausgleich')
|
|
} else {
|
|
wurzel.style.setProperty('--kn-zoom-ausgleich', String(faktor))
|
|
wurzel.classList.add('kn-zoom-ausgleich')
|
|
}
|
|
}
|
|
setze()
|
|
vv.addEventListener('resize', setze)
|
|
return { faktor: () => faktor, beende() { vv.removeEventListener('resize', setze) } }
|
|
}
|