Holen Sie sich die Gerätebreite in Javascript

Gibt es eine Möglichkeit, die Gerätebreite des Benutzers im Gegensatz zur Breite des Ansichtsfensters mithilfe von Javascript zu ermitteln?

CSS-Medienabfragen bieten dies, wie ich sagen kann

@media screen and (max-width:640px) {
    /* ... */
}

und

@media screen and (max-device-width:960px) {
    /* ... */
}

Dies ist nützlich, wenn ich Smartphones im Querformat anvisiere. Unter iOS zielt eine Deklaration von beispielsweise sowohl auf den Quer- als max-width:640pxauch auf das Hochformat ab, auch auf ein iPhone 4. Soweit ich das beurteilen kann, ist dies bei Android nicht der Fall. Die Verwendung der Gerätebreite in diesem Fall zielt also erfolgreich auf beide Ausrichtungen ab. ohne auf Desktop-Geräte abzuzielen.

Wenn ich jedoch eine Javascript-Bindung basierend auf der Gerätebreite aufrufe, beschränke ich mich anscheinend darauf, die Breite des Ansichtsfensters zu testen. Dies bedeutet einen zusätzlichen Test wie im Folgenden:

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

Dies erscheint mir angesichts des Hinweises, dass die Gerätebreite für CSS verfügbar ist, nicht elegant.

Sie können die Bildschirmbreite des Geräts über die Eigenschaft screen.width abrufen.
Manchmal ist es auch nützlich, window.innerWidth (normalerweise nicht auf Mobilgeräten zu finden) anstelle der Bildschirmbreite zu verwenden, wenn Desktop-Browser verwendet werden, bei denen die Fenstergröße häufig kleiner als die Bildschirmgröße des Geräts ist.

Normalerweise verwende ich beim Umgang mit Mobilgeräten UND Desktop-Browsern Folgendes:

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

Ein Problem mit Bryan Riegers nützlicher Antwort ist, dass Apple-Geräte auf Displays mit hoher Dichte die Bildschirmbreite in Einbrüchen und Android-Geräte in physischen Pixeln angeben. (Siehe http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Ich empfehle die Verwendung if (window.matchMedia('(max-device-width: 960px)').matches) {}in Browsern, die matchMedia unterstützen.

Ich hatte gerade diese Idee, also ist sie vielleicht kurzsichtig, aber sie scheint gut zu funktionieren und ist möglicherweise die konsistenteste zwischen Ihrem CSS und JS.

In Ihrem CSS legen Sie den Wert für die maximale Breite für HTML basierend auf dem Bildschirmwert @media fest:

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

Dann würden Sie mit JS (wahrscheinlich über ein Framework wie JQuery) nur den Wert für die maximale Breite des HTML-Tags überprüfen:

maxwidth = $('html').css('max-width');

Jetzt können Sie diesen Wert verwenden, um bedingte Änderungen vorzunehmen:

If (maxwidth == '480px') { do something }

Wenn es beängstigend erscheint, den Wert für die maximale Breite in das HTML-Tag einzufügen, können Sie möglicherweise ein anderes Tag hinzufügen, das nur für diesen Zweck verwendet wird. Für meinen Zweck funktioniert das HTML-Tag einwandfrei und hat keinen Einfluss auf mein Markup.

Nützlich, wenn Sie Sass usw. verwenden : Um einen abstrakteren Wert wie den Haltepunktnamen anstelle des px-Werts zurückzugeben, können Sie Folgendes tun:

1. Erstellen Sie ein Element, in dem der Haltepunktname gespeichert wird, z <div id="breakpoint-indicator" />
2. Wenn Sie CSS-Medienabfragen verwenden, ändern Sie die Inhaltseigenschaft für dieses Element, z. B. "groß" oder "mobil" usw. (der gleiche grundlegende Ansatz für Medienabfragen wie oben, jedoch wird die CSS-Eigenschaft "Inhalt" anstelle von "Maximale Breite" festgelegt).
3. Rufen Sie den CSS-Inhaltseigenschaftswert mit js oder jquery (z. B. jquery $('#breakpoint-indicator').css('content');) ab, das "groß" oder "mobil" usw. zurückgibt, je nachdem, auf was die Inhaltseigenschaft in der Medienabfrage festgelegt ist.
4. Handle auf den aktuellen Wert.

Jetzt können Sie dieselben Haltepunktnamen wie in sass verwenden, z. B. sass : @include respond-to(xs), und js if ($breakpoint = "xs) {}.

Was mir daran besonders gefällt, ist, dass ich meine Haltepunktnamen alle in CSS und an einer Stelle definieren kann (wahrscheinlich ein Scss-Dokument für Variablen) und meine JS unabhängig darauf reagieren können.

var width = Math.max(window.screen.width, window.innerWidth);

Dies sollte die meisten Szenarien behandeln.

Du solltest benutzen

document.documentElement.clientWidth

Es wird als browserübergreifende Kompatibilität angesehen und ist dieselbe Methode wie jQuery (window) .width (). Verwendet.

Detaillierte Informationen finden Sie unter: https://ryanve.com/lab/dimensions/

Ich denke, die Verwendung window.devicePixelRatioist eleganter als die window.matchMediaLösung:

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}

prüfen Sie

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Sie können leicht verwenden

document.documentElement.clientWidth

Lumia-Telefone geben eine falsche Bildschirmbreite an (zumindest auf dem Emulator). Funktioniert das vielleicht Math.min(window.innerWidth || Infinity, screen.width)auf allen Geräten?

Oder etwas Verrückteres:

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

Sie können document.documentElement.clientWidth verwenden, um die Gerätebreite des Clients abzurufen und die Gerätebreite durch Setzen von setInterval zu verfolgen

so wie

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);

Genau wie zu Ihrer Information gibt es eine Bibliothek namens Haltepunkte, die die in CSS festgelegte maximale Breite erkennt und es Ihnen ermöglicht, sie unter JS-if-else-Bedingungen mit den Zeichen <=, <,>,> = und == zu verwenden. Ich fand es sehr nützlich. Die Nutzlastgröße liegt unter 3 KB.