Wie erkenne ich die Bildschirmauflösung mit JavaScript?

Antworten:

295

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.devicePixelRatiound window.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
John Weldon
quelle
15
Es ist jetzt nicht ganz richtig. Eine mögliche Änderung des Seitenzooms wird nicht berücksichtigt.
Sergzach
7
@sergzach - In diesem Fall würde ich $(window).width()stattdessen jQuery's verwenden, siehe chaim.devs Antwort
BornToCode
3
Verwenden Sie window.screen.height und window.screen.width, um die genaue Bildschirmgröße zu erhalten (wie in der nächsten Antwort vorgeschlagen). Der Grund, warum Sie nicht die genaue Größe erhalten, ist, dass die verfügbare Breite und Höhe überprüft wird. Dies bedeutet, dass die Symbolleistenhöhe (die unter Windows 7/8 genau 40 Pixel beträgt)
subtrahiert wird
4
Wäre es nicht besser, wenn die Bildschirmauflösung zu window.screen.height und width passt? Warum verfügbar? Meine verfügbare Breite zum Beispiel gibt 1050 zurück, wenn es tatsächlich 1080 ist.
Malavos
5
@eckes, mit denen Sie multiplizieren müssen window.devicePixelRatio. Siehe meinen Kommentar zur Antwort von Alessandros.
Tsunamis
49
var width = screen.width;
var height = screen.height;
Alessandro
quelle
1
Dies entspricht window.screen. Sollte es einfach zur vorhandenen Antwort hinzufügen.
Gajus
3
Eigentlich ist das die richtige Antwort. screen.availHeightGibt nur die verfügbare Höhe im Browserfenster an, während screen.heightdie genaue Höhe des Bildschirms angegeben wird.
Apnerve
Dies gibt die dpi-skalierte Auflösung zurück, nicht die native Bildschirmauflösung.
Dominic Cerisano
4
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.devicePixelRatiound window.screen.height * window.devicePixelRatio. Dies wird auch auf Desktops funktionieren, die ein Verhältnis von 1 haben werden.
Tsunamis
Desktop-Computer haben nicht unbedingt ein Verhältnis von 1.
12Me21
34

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

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.

$(window).width()
$(window).height()
Ben
quelle
19

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.

Larry K.
quelle
19

Mit jQuery können Sie Folgendes tun:

$(window).width()
$(window).height()
chaim.dev
quelle
Dies ist die einfachste Cross / All-Lösung, die ich verwendet habe. Für
Browserbreite
34
Dies gibt die Fenstergröße zurück, nicht die Bildschirmauflösung.
Jonas
19

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 und window.innerHeightEigenschaften. 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.

serfer2
quelle
1
Dies ist die nützlichste Lösung. Die Eigenschaft window.screen.availWidth gibt den BILDSCHIRM an, nicht das Ansichtsfenster, das möglicherweise unterschiedlich ist. Für mich ist es nützlicher zu wissen, wie viel Immobilien ich tatsächlich nutzen kann, nicht wie hoch das Maximum des Browsers sein könnte / wird.
Mike Mannakee
13

Der Versuch, dies auf ein mobiles Gerät zu übertragen, erfordert einige weitere Schritte. screen.availWidthbleibt unabhängig von der Ausrichtung des Geräts gleich.

Hier ist meine Lösung für Mobilgeräte:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};
Posit Labs
quelle
window.orientationgibt undefiniert zurück ... (Firefox 49) screen.orientation.anglegibt einen Winkel zurück, der jedoch im Querformat bereits bei 0 liegt.
Lambart
4
function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}
Anabar
quelle
4

Nur zum späteren Nachschlagen:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}
Daniel
quelle
3

Wenn Sie die Bildschirmauflösung ermitteln möchten, können Sie die Plugin-Auflösung überprüfen . Damit können Sie Folgendes tun:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Hier sind einige großartige Auflösungen von Ryan Van Etten, dem Autor des Plugins:

  • Es gibt 2 Einheitensätze, die sich in einem festen Maßstab unterscheiden: Geräteeinheiten und CSS-Einheiten.
  • Die Auflösung wird als Anzahl der Punkte berechnet, die entlang einer bestimmten CSS-Länge passen können.
  • Einheitenumrechnung: 1⁢in = 2,54⁢cm = 96⁢px = 72⁢pt
  • CSS hat relative und absolute Längen. Im normalen Zoom: 1⁢em = 16⁢px
  • dppx entspricht dem Geräte-Pixel-Verhältnis.
  • Die Definition von devicePixelRatio unterscheidet sich je nach Plattform.
  • Medienabfragen können auf eine minimale Auflösung abzielen. Vorsichtig mit Geschwindigkeit verwenden.

Hier ist der Quellcode für res ab heute:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});
Abram
quelle