getWindow

Liefert die Größe des sichtbaren Fensters, browserübergreifend.

API

getWindow

Rückgabe

Argument	Beschreibung	Typ
`ClientRatio`	Das Objekt mit der Fenstergröße	`ClientRatio`

ClientRatio

Eigenschaft	Beschreibung	Typ
`width`	Breite des Fensters (Pixel)	`number`
`height`	Höhe des Fensters (Pixel)	`number`

Parameter

Keine Parameter

Beispiel

Grundlegende Verwendung

import { getWindow } from 'ranuts';

const windowSize = getWindow();
console.log('Fensterbreite:', windowSize.width);
console.log('Fensterhöhe:', windowSize.height);

Anpassungsfähiges Layout

import { getWindow } from 'ranuts';

function handleResize() {
  const { width, height } = getWindow();
  if (width < 768) {
    // Layout für Mobilgeräte
  } else {
    // Layout für den Desktop
  }
}

window.addEventListener('resize', handleResize);

Sicherheit auf dem Server

import { getWindow } from 'ranuts';

// Wirft in einer Server-Umgebung keinen Fehler, sondern liefert { width: 0, height: 0 }
const size = getWindow();
console.log(size); // { width: 0, height: 0 }

Das Seitenverhältnis berechnen

import { getWindow } from 'ranuts';

const { width, height } = getWindow();
const aspectRatio = width / height;
console.log('Seitenverhältnis:', aspectRatio);

Hinweise

Browser-Kompatibilität: nutzt window.innerWidth und window.innerHeight, die jeder moderne Browser kennt.
Auch auf dem Server sicher: In Server-Umgebungen (kein window-Objekt) kommt { width: 0, height: 0 } zurück, ein Fehler wird nicht geworfen.
Momentaufnahme: Zurück kommt die Größe zum Zeitpunkt des Aufrufs; ändert sich das Fenster, ruf erneut auf.
Einsatz: üblich für responsive Layouts, Media Queries und die Beobachtung der Fenstergröße.