Heim > Web-Frontend > CSS-Tutorial > Wie kann ich in JavaScript die Gerätebreite des Benutzers und nicht die Breite des Ansichtsfensters ermitteln?

Wie kann ich in JavaScript die Gerätebreite des Benutzers und nicht die Breite des Ansichtsfensters ermitteln?

Barbara Streisand
Freigeben: 2024-12-01 13:11:11
Original
362 Leute haben es durchsucht

How Can I Get the User's Device Width, Not Viewport Width, in JavaScript?

Gerätebreite in JavaScript erkennen

Frage:

Wie können wir das Gerät des Benutzers ermitteln? Breite, verschieden von der Breite des Ansichtsfensters, mit JavaScript?

Antwort:

CSS-Medienabfragen stellen hierfür eine Methode bereit, die die Eigenschaft „max-device-width“ verwendet. Bei der Arbeit mit JavaScript-Bindungen sind wir jedoch oft auf den Zugriff auf die Breite des Ansichtsfensters beschränkt.

Elegante Lösung:

Um dies elegant anzugehen, können wir den Bildschirm nutzen. width-Eigenschaft, um die Bildschirmbreite des Geräts abzurufen. In einigen Fällen, beispielsweise bei Desktop-Browsern, bei denen die Fenstergröße von der Bildschirmgröße des Geräts abweichen kann, können wir stattdessen window.innerWidth verwenden.

Plattformübergreifende Kompatibilität:

Für eine umfassende Lösung, die sowohl auf Mobil- als auch auf Desktop-Browsern funktioniert, beachten Sie Folgendes:

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
Nach dem Login kopieren

Dadurch wird sichergestellt, dass wir die erhalten Korrekte Gerätebreite unabhängig vom Anzeigekontext.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage