Wie kann ich die Abmessungen des Browser-Ansichtsfensters in JavaScript genau bestimmen?

Bestimmen der Browser-Ansichtsfensterabmessungen

Für eine optimale Benutzererfahrung ist es entscheidend, auf verschiedene Bildschirmauflösungen und Ansichtsfenstergrößen des Geräts zu achten. Dadurch können Sie qualitativ hochwertige Bilder liefern, ohne dass die Klarheit darunter leidet oder die Proportionen verzerrt werden. Um dieses Ziel zu erreichen, untersuchen wir zwei JavaScript-Ansätze zum genauen Abrufen der Abmessungen des Browser-Ansichtsfensters.

1. Cross-Browser @media Values

Diese Methode nutzt die @media CSS-Medienabfragen, um die Abmessungen des Browser-Ansichtsfensters zu erhalten. Durch die Abfrage des Maximums verschiedener Darstellungsfenstermaße können wir Unterschiede zwischen Browsern und Geräten berücksichtigen.

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight | |. 0);

2. Fenster- und Dokumenteigenschaften

Alternativ können wir bestimmte Fenster- und Dokumenteigenschaften nutzen, um Ansichtsfenstermessungen zu erhalten.

window.innerWidth und window.innerHeight

Diese Eigenschaften rufen die Abmessungen des Ansichtsfensters ab, einschließlich Bildlaufleisten. Sie können jedoch durch Zoomeinstellungen beeinflusst werden und werden in Internet Explorer 8 oder früher nicht unterstützt.

document.documentElement.clientWidth und .clientHeight

Diese Eigenschaften stellen das Browser-Ansichtsfenster abzüglich der Bildlaufleistenbreite dar. Sie stimmen mit den @media-Werten überein, wenn keine Bildlaufleiste vorhanden ist, und sie sind browserübergreifend kompatibel.

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