Wie kann ich die Bildschirmbreite eines Geräts in JavaScript genau bestimmen?

Bestimmen der Bildschirmbreite des Geräts in JavaScript

Die Möglichkeit, die Bildschirmbreite des Geräts in JavaScript abzurufen, kann hilfreich sein, um Inhalte an die spezifischen Abmessungen des Geräts des Benutzers anzupassen. Während CSS-Medienabfragen eine bequeme Möglichkeit bieten, bildschirmgrößenabhängige Stilanpassungen vorzunehmen, bietet JavaScript eine direkte Methode für den Zugriff auf die tatsächliche Breite des Geräts.

Im Gegensatz zur Breite des Ansichtsfensters bietet die Gerätebreite eine unverfälschte Messung der physischen Abmessungen des Bildschirms . Dies ist besonders nützlich, um auf bestimmte Geräteausrichtungen abzuzielen, die möglicherweise nicht mit den Ansichtsfensterbeschränkungen übereinstimmen. Beispielsweise erfasst eine CSS-Medienabfrage, die auf eine maximale Breite von 640 Pixel abzielt, auf iOS-Geräten sowohl den Quer- als auch den Hochformatmodus, selbst auf einem iPhone 4. Android-Geräte erfordern jedoch die Verwendung von „device-width“, um beide Ausrichtungen beim Ausschließen effektiv zu verarbeiten Desktop-Geräte.

Beim Versuch, JavaScript-Bindungen basierend auf der Gerätebreite aufzurufen, ist es jedoch üblich, auf die Breite des Ansichtsfensters beschränkt zu sein. Diese Einschränkung erzwingt zusätzliche bedingte Prüfungen, wie im folgenden Code veranschaulicht:

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

Um diesen ausführlichen Ansatz zu umgehen, sollten Sie die Verwendung der screen.width-Eigenschaft in Betracht ziehen, die direkten Zugriff auf die physische Bildschirmbreite des Geräts ermöglicht. Darüber hinaus kann für Desktop-Browser, bei denen die Fenstergröße von der Bildschirmgröße abweichen kann, die Eigenschaft window.innerWidth verwendet werden.

In Situationen, in denen sowohl mobile als auch Desktop-Browser beteiligt sind, wird oft ein hybrider Ansatz empfohlen:

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

Diese Kombination gewährleistet eine genaue Erkennung der Gerätebreite auf verschiedenen Geräten und Betriebssystemen.

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