Wie kann ich mithilfe von JavaScript die Bildschirmbreite eines Geräts genau ermitteln?

Genaue Messungen der Gerätebreite mit JavaScript erhalten

Bei der Anpassung von Webanwendungen an unterschiedliche Gerätegrößen ist es entscheidend, die tatsächliche Bildschirmbreite des Geräts zu ermitteln. Während CSS Medienabfragen mit der Eigenschaft „max-device-width“ anbietet, fehlt in JavaScript ein direktes Äquivalent zum Abrufen dieser Informationen.

Beschränkungen der Ansichtsfensterbreite

JavaScript-Bindungen stützen sich häufig darauf Testen der Breite des Ansichtsfensters, was bei Geräten im Querformat zu ungenauen Ergebnissen führen kann, da diese einen größeren verfügbaren Bereich anzeigen. Diese Einschränkung erfordert zusätzliche Prüfungen und beeinträchtigt die Eleganz des Codes.

Lösung: Eigenschaft „Bildschirmbreite“

Um die Bildschirmbreite des Geräts genau zu bestimmen, stellt JavaScript die Eigenschaft „screen.width“ bereit. Dieser Wert stellt den sichtbaren Bildschirmbereich dar, ausgenommen Bildlaufleisten und andere Browserelemente.

Plattformübergreifende Überlegungen

In einigen Fällen kann window.innerWidth besser geeignet sein, insbesondere für Desktop-Browser, bei denen die Fenstergröße von der Bildschirmgröße des Geräts abweicht. Um allen Plattformen gerecht zu werden, wird empfohlen, die folgende Bedingung zu verwenden:

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Dieser Ansatz weist die tatsächliche Gerätebreite der Breitenvariablen zu, wenn window.innerWidth definiert ist, andernfalls wird screen.width als verwendet Rückfall.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript die Bildschirmbreite eines Geräts genau ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!