Gibt es eine Möglichkeit, die für alle Browser funktioniert?
196
ursprüngliche Antwort
Ja.
window.screen.availHeight
window.screen.availWidth
Update 2017-11-10
Von Tsunamis in den Kommentaren:
Um die native Auflösung eines Mobilgeräts zu erhalten, müssen Sie mit dem Pixelverhältnis des Geräts multiplizieren:
window.screen.width * window.devicePixelRatio
undwindow.screen.height * window.devicePixelRatio
. Dies funktioniert auch auf Desktops mit einem Verhältnis von 1.
Und von Ben in einer anderen Antwort:
In Vanille-JavaScript erhalten Sie die VERFÜGBARE Breite / Höhe:
window.screen.availHeight window.screen.availWidth
Verwenden Sie für die absolute Breite / Höhe:
window.screen.height window.screen.width
$(window).width()
stattdessen jQuery's verwenden, siehe chaim.devs Antwortwindow.devicePixelRatio
. Siehe meinen Kommentar zur Antwort von Alessandros.quelle
window.screen
. Sollte es einfach zur vorhandenen Antwort hinzufügen.screen.availHeight
Gibt nur die verfügbare Höhe im Browserfenster an, währendscreen.height
die genaue Höhe des Bildschirms angegeben wird.window.screen.width * window.devicePixelRatio
undwindow.screen.height * window.devicePixelRatio
. Dies wird auch auf Desktops funktionieren, die ein Verhältnis von 1 haben werden.In Vanille-JavaScript erhalten Sie die VERFÜGBARE Breite / Höhe:
Verwenden Sie für die absolute Breite / Höhe:
Beide oben genannten können ohne das Fensterpräfix geschrieben werden.
Wie jQuery? Dies funktioniert in allen Browsern, aber jeder Browser gibt unterschiedliche Werte an.
quelle
Meinen Sie die Anzeigeauflösung (z. B. 72 Punkte pro Zoll) oder die Pixelabmessungen (das Browserfenster ist derzeit 1000 x 800 Pixel groß)?
Mit der Bildschirmauflösung können Sie feststellen, wie dick eine 10-Pixel-Linie in Zoll sein wird. Die Pixelabmessungen geben an, wie viel Prozent der verfügbaren Bildschirmhöhe von einer 10 Pixel breiten horizontalen Linie eingenommen werden.
Es gibt keine Möglichkeit, die Bildschirmauflösung nur aus Javascript zu ermitteln, da der Computer selbst normalerweise nicht die tatsächlichen Abmessungen des Bildschirms kennt, sondern nur die Anzahl der Pixel. 72 dpi ist die übliche Vermutung ....
Beachten Sie, dass die Bildschirmauflösung sehr verwirrend ist. Oft wird der Begriff anstelle der Pixelauflösung verwendet, aber die beiden sind sehr unterschiedlich. Siehe Wikipedia
Natürlich können Sie die Auflösung auch in Punkten pro cm messen. Es gibt auch das dunkle Thema der nicht quadratischen Punkte. Aber ich schweife ab.
quelle
Mit jQuery können Sie Folgendes tun:
quelle
Sie können auch die Breite und Höhe des Fensters abrufen, ohne Browser-Symbolleisten und ... (nicht nur Bildschirmgröße).
Verwenden Sie dazu:
window.innerWidth
undwindow.innerHeight
Eigenschaften. Sehen Sie es bei w3schools .In den meisten Fällen ist es beispielsweise am besten, einen perfekt zentrierten schwebenden modalen Dialog anzuzeigen. Sie können damit Positionen im Fenster berechnen, unabhängig davon, welche Auflösungsausrichtung oder Fenstergröße der Browser verwendet.
quelle
Der Versuch, dies auf ein mobiles Gerät zu übertragen, erfordert einige weitere Schritte.
screen.availWidth
bleibt unabhängig von der Ausrichtung des Geräts gleich.Hier ist meine Lösung für Mobilgeräte:
quelle
window.orientation
gibt undefiniert zurück ... (Firefox 49)screen.orientation.angle
gibt einen Winkel zurück, der jedoch im Querformat bereits bei 0 liegt.Siehe Abrufen der Bildschirmauflösung mit Javascript und dem
window.screen
Objektquelle
quelle
Nur zum späteren Nachschlagen:
quelle
Wenn Sie die Bildschirmauflösung ermitteln möchten, können Sie die Plugin-Auflösung überprüfen . Damit können Sie Folgendes tun:
Hier sind einige großartige Auflösungen von Ryan Van Etten, dem Autor des Plugins:
Hier ist der Quellcode für res ab heute:
quelle