Zoom mit resizeObserver belauschen

[Matthias Scharwies]

Guten Morgen,

Problem: Wenn ich die Schrift vergrößere, wandert der Text aus dem sichtbaren Bereich aus. Ich möchte. dass die Zeilen neu umgebrochen werden.

Ich glaube eher, dass es ein HTML und CSS-Problem ist.

Ist im head dies gesetzt?

<meta name="viewport" content="width=device-width, initial-scale=1">

P-Absätze ohne pre und br?

Im CSS musst du

• relative Schriftgrößen setzen, evtl. sogar
  font-size: clamp(1.2rem, 3vw, 2rem);
• feste Breiten vermeiden
• automatischen Zeilenumbruch erlauben

---

Dies habe ich versucht:

function test() {
  document.querySelectorAll( "body" )[0].style.maxWidth = "100vw";
}
setInterval( test, 1000 );  // jede sec body auf max-width=100vw setzen

funktioniert leider nicht. Gibt es eine Lösung?

Jede Sekunde nicht fragen, ob sich der Viewport geändert hat, sondern automatisch die Größe neu setzen? Ist das nicht Holzhammer?

Der ResizeObserver ist wohl nicht ganz das passende …

• JavaScript und CSS/CSS-Eigenschaften auslesen (auf Veränderungen reagieren)

aber evtl.

if (window.visualViewport) {
  visualViewport.addEventListener("resize", () => {
    console.log("Zoom or viewport change");
    console.log("Scale:", visualViewport.scale);
  });
}

oder du versuchst über die device-pixel-ratio auf den Zoom zu kommen:

let lastRatio = window.devicePixelRatio;

window.addEventListener("resize", () => {
  if (window.devicePixelRatio !== lastRatio) {
    console.log("Zoom detected");
    lastRatio = window.devicePixelRatio;
  }
});

Herzliche Grüße
Matthias Scharwies