web-dev-qa-db-ger.com

Wie erkenne ich die Bildschirmauflösung mit JavaScript?

Gibt es eine Möglichkeit, die für alle Browser funktioniert?

174
iceorangeblue

ursprüngliche Antwort

Ja.

window.screen.availHeight
window.screen.availWidth

Update 10.11.2017

Von Tsunamis in den Kommentaren:

Um die native Auflösung eines mobilen Geräts zu erhalten, müssen Sie das Pixelverhältnis des Geräts multiplizieren: window.screen.width * window.devicePixelRatio und window.screen.height * window.devicePixelRatio. Dies funktioniert auch auf Desktops mit einem Verhältnis von 1.

Und von Ben in einer anderen Antwort:

In Vanilla 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
269
John Weldon
var width = screen.width;
var height = screen.height;
49
Alessandro

In Vanilla JavaScript erhalten Sie das [~ # ~] verfügbare [~ # ~] width/height:

window.screen.availHeight
window.screen.availWidth

Verwenden Sie für die absolute Breite/Höhe:

window.screen.height
window.screen.width

Beides kann ohne das Fensterpräfix geschrieben werden.

Wie jQuery? Dies funktioniert in allen Browsern, aber jeder Browser gibt andere Werte an.

$(window).width()
$(window).height()
33
Ben

Meinen Sie damit die Anzeigeauflösung (z. B. 72 Punkte pro Zoll) oder die Pixelgröße (das Browserfenster ist derzeit 1000 x 800 Pixel)?

Mit der Bildschirmauflösung können Sie bestimmen, wie dick eine 10-Pixel-Linie in Zoll sein wird. Die Pixelmaße 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 über 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 Schätzung ....

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 auch die Auflösung in Punkten pro cm messen. Es gibt auch das obskure Thema der nicht quadratischen Punkte. Aber ich schweife ab.

19
Larry K

Mit jQuery können Sie:

$(window).width()
$(window).height()
19
chaim.dev

Sie können auch die WINDOW-Breite und -Höhe abrufen, ohne Browser-Symbolleisten und ... (nicht nur die Bildschirmgröße).

Verwenden Sie dazu: window.innerWidth und window.innerHeight Eigenschaften. Siehe w3schools .

In den meisten Fällen ist es beispielsweise die beste Möglichkeit, ein perfekt zentriertes schwebendes modales Dialogfeld anzuzeigen. Damit können Sie Positionen im Fenster berechnen, unabhängig von der Auflösungsorientierung oder Fenstergröße, die der Browser verwendet.

16
serfer2

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ürs Handy:

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;
};
12
posit labs
7
cletus
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;
}
4
Anabar

nur zum späteren Nachschlagen:

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

Wenn Sie die Bildschirmauflösung erkennen möchten, sollten Sie das Plugin res auschecken. 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 Resolution Takeaways von Ryan Van Etten, dem Autor des Plugins:

  • 2 Einheitensätze existieren und unterscheiden sich in einem festen Maßstab: Geräteeinheiten und CSS-Einheiten.
  • Die Auflösung wird als die 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. Bei normalem 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 verwenden, um die Geschwindigkeit zu erhöhen.

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}
});
2
Abram