Wie erkenne ich die Bildschirmauflösung mit JavaScript?

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

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

var width = screen.width;
var height = screen.height;

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()

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.

Mit jQuery können Sie Folgendes tun:

$(window).width()
$(window).height()

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.

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;
};

Siehe Abrufen der Bildschirmauflösung mit Javascript und dem window.screenObjekt

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;
}

Nur zum späteren Nachschlagen:

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

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