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

Erkennung der Browser-Ansichtsfensterabmessungen

Problem:

Wie kann ich die Ansichtsfenstergröße eines Browsers mithilfe von JavaScript ermitteln? Diese Informationen sind besonders nützlich für die Optimierung der Bildqualität basierend auf dem verfügbaren Anzeigebereich.

Lösung:

Es gibt mehrere Ansätze, um die Abmessungen des Browser-Ansichtsfensters zu ermitteln:

Cross-Browser: @media (Breite) und @media (Höhe) Werte

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

window.innerWidth und window.innerHeight

Eigenschaften:

• Ruft CSS-Ansichtsfensterabmessungen einschließlich Bildlaufleisten ab
• Auf Mobilgeräten kann es aufgrund des anfänglichen Maßstabs unzuverlässig sein zoom

document.documentElement.clientWidth und .clientHeight

Eigenschaften:

• Breite des CSS-Ansichtsfensters minus Breite der Bildlaufleiste
• Entspricht @media-Dimensionen mit Nr Bildlaufleiste
• Browserübergreifende Unterstützung
• Ungenau ohne Doctype

Ressourcen:

• [Live-Ausgaben für verschiedene Abmessungen](https://jsfiddle.net/ariya/tvn3d/)
• [Verge](https://github.com/ryanseddon/verge)
• [actual.js]( https://github.com/jsdom/actual)

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