Wie kann ich die tatsächliche Gerätebreite in JavaScript ermitteln?

Bestimmen der Gerätebreite in JavaScript

Einführung

Erfassen der tatsächlichen Breite des Geräts im Gegensatz dazu zur Breite des Ansichtsfensters ist eine häufige Anforderung in der JavaScript-Entwicklung. CSS-Medienabfragen bieten diese Funktion über die Eigenschaft max-device-width. Die Überbrückung dieser Funktionalität mit JavaScript bleibt jedoch eine Herausforderung.

Gerätebreite vs. Ansichtsfensterbreite

Die Ansichtsfensterbreite bezieht sich auf den sichtbaren Teil der Seite im Browserfenster. Die Gerätebreite hingegen stellt die gesamte physische Bildschirmgröße des Geräts dar. Diese Unterscheidung ist bei der Erstellung responsiver Designs von entscheidender Bedeutung, insbesondere wenn es um Smartphones im Querformat geht.

JavaScript-Lösung

Um die Gerätebreite in JavaScript zu ermitteln, verwenden Sie den Bildschirm. width-Eigenschaft:

var deviceWidth = screen.width;

In einigen Fällen, insbesondere bei Desktop-Browsern, kann window.innerWidth eine genauere Darstellung liefern Messung:

var windowWidth = window.innerWidth;

Für Szenarien, die sowohl Desktop-Browser als auch mobile Geräte umfassen, besteht eine umfassende Lösung darin, beide Messungen zu kombinieren:

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

Dieser Ansatz stellt unabhängig vom Gerät die richtige Gerätebreite sicher oder Browsertyp.

Das obige ist der detaillierte Inhalt vonWie kann ich die tatsächliche Gerätebreite in JavaScript ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!