Wie kann ich die Abmessungen des Browser-Ansichtsfensters mithilfe von JavaScript ermitteln?

So ermitteln Sie die Abmessungen des Browser-Ansichtsfensters

Hintergrund:

Browser zeigen Inhalte an innerhalb eines bestimmten Bereichs, der als „Ansichtsfenster“ bekannt ist. Dieser Bereich schließt die Adressleiste, Symbolleisten und andere UI-Elemente aus. In bestimmten Szenarien müssen Entwickler möglicherweise die genaue Größe des Ansichtsfensters bestimmen, um Benutzern ein optimales Seherlebnis zu bieten.

Lösung:

Es gibt mehrere Methoden, um das abzurufen Abmessungen des Browser-Ansichtsfensters mit JavaScript:

1. Browserübergreifende Werte für @media (Breite) und @media (Höhe):

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

2. window.innerWidth und window.innerHeight:

Diese Eigenschaften geben direkt die Breite und Höhe des CSS-Ansichtsfensters zurück, einschließlich Bildlaufleisten. Beachten Sie jedoch, dass diese Werte auf Mobilgeräten aufgrund von Skalierungsproblemen variieren können.

3. document.documentElement.clientWidth und .clientHeight:

Diese Eigenschaften berechnen die Breite und Höhe des Ansichtsfensters ohne die Breite der Bildlaufleiste. Sie richten sich nach den @media-Werten, wenn keine Bildlaufleiste vorhanden ist.

Zusätzliche Informationen:

• Die oben beschriebenen Methoden sind browserübergreifend kompatibel und werden weitgehend unterstützt.
• Ressourcen zum Testen der Live-Ausgaben verschiedener Ansichtsfenster sind online verfügbar Abmessungen.
• Bibliotheken von Drittanbietern wie „verge“ und „actual“ bieten praktische Abstraktionen, um genaue Ansichtsfensterabmessungen in jeder gewünschten Maßeinheit zu erhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich die Abmessungen des Browser-Ansichtsfensters mithilfe von JavaScript ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!