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:640px
auch 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.
quelle
Modernizr
kann Ihnen dabei "auf saubere und generische Weise" helfen : stackoverflow.com/questions/25935686/… . Zum ersten Kommentar: Vielleicht möchten Sie "Modernizr vs <otherLib> Medienabfrage" googeln, um herauszufinden, was für Ihren Anwendungsfall am besten funktioniertAntworten:
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:
quelle
width=device-width
, sollten Sie den tatsächlichen Wert erhalten.var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
gibt 667 auf dem iPhone 6 AND 6 Plus zurück. Diese Lösung funktioniert nicht richtig.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.quelle
if (window.matchMedia('(max-device-width: 960px)').matches) { var winW = (window.innerWidth > 0) ? window.innerWidth : screen.width; } else { var winW = screen.width; }
var isMobile = window.matchMedia && window.matchMedia('(max-device-width: 960px)').matches || screen.width <= 960;
matchMedia()
gibt es eine Polyfüllung: github.com/paulirish/matchMedia.jsIch 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:
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:
Jetzt können Sie diesen Wert verwenden, um bedingte Änderungen vorzunehmen:
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:
<div id="breakpoint-indicator" />
$('#breakpoint-indicator').css('content');
) ab, das "groß" oder "mobil" usw. zurückgibt, je nachdem, auf was die Inhaltseigenschaft in der Medienabfrage festgelegt ist.Jetzt können Sie dieselben Haltepunktnamen wie in sass verwenden, z. B. sass :
@include respond-to(xs)
, und jsif ($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.
quelle
var width = Math.max(window.screen.width, window.innerWidth);
Dies sollte die meisten Szenarien behandeln.
quelle
Du solltest benutzen
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/
quelle
Ich denke, die Verwendung
window.devicePixelRatio
ist eleganter als diewindow.matchMedia
Lösung:quelle
prüfen Sie
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
quelle
Sie können leicht verwenden
document.documentElement.clientWidth
quelle
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:
quelle
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
quelle
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.
quelle