Jak wykryć rozdzielczość ekranu za pomocą JavaScript?

Czy istnieje sposób, który działa dla wszystkich przeglądarek?

oryginalna odpowiedź

Tak.

window.screen.availHeight
window.screen.availWidth

aktualizacja 2017-11-10

Od Tsunami w komentarzach:

Aby uzyskać natywną rozdzielczość np. Urządzenia mobilnego, należy pomnożyć przez współczynnik pikseli urządzenia: window.screen.width * window.devicePixelRatioi window.screen.height * window.devicePixelRatio. Będzie to również działać na komputerach stacjonarnych, które będą miały stosunek 1.

I od Bena w innej odpowiedzi:

W waniliowym JavaScript daje ci DOSTĘPNĄ szerokość / wysokość:

window.screen.availHeight
window.screen.availWidth

Aby uzyskać bezwzględną szerokość / wysokość, użyj:

window.screen.height
window.screen.width

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

W waniliowym JavaScript daje ci DOSTĘPNĄ szerokość / wysokość:

window.screen.availHeight
window.screen.availWidth

Aby uzyskać bezwzględną szerokość / wysokość, użyj:

window.screen.height
window.screen.width

Oba powyższe można zapisać bez prefiksu okna.

Jak jQuery? Działa to we wszystkich przeglądarkach, ale każda przeglądarka podaje inne wartości.

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

Czy masz na myśli rozdzielczość wyświetlania (np. 72 kropki na cal) lub wymiary w pikselach (okno przeglądarki ma obecnie 1000 x 800 pikseli)?

Rozdzielczość ekranu pozwala dowiedzieć się, jak gruba będzie linia 10 pikseli w calach. Wymiary w pikselach informują, jaki procent dostępnej wysokości ekranu zostanie zajęty przez poziomą linię o szerokości 10 pikseli.

Rozdzielczości ekranu nie można poznać tylko z poziomu Javascript, ponieważ sam komputer zwykle nie zna rzeczywistych wymiarów ekranu, tylko liczbę pikseli. 72 dpi to zwykle przypuszczenie ....

Zwróć uwagę, że istnieje wiele nieporozumień na temat rozdzielczości wyświetlania, często ludzie używają tego terminu zamiast rozdzielczości pikseli, ale oba są zupełnie różne. Zobacz Wikipedia

Oczywiście możesz także mierzyć rozdzielczość w punktach na cm. Istnieje również niejasny temat kropek nie kwadratowych. Ale dygresję.

Korzystając z jQuery możesz:

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

Możesz także uzyskać szerokość i wysokość okna, unikając pasków narzędzi przeglądarki i ... (nie tylko rozmiar ekranu).

Aby to zrobić, użyj: window.innerWidth i window.innerHeightwłaściwości. Zobacz na w3schools .

W większości przypadków najlepszym sposobem będzie, na przykład, wyświetlanie idealnie wyśrodkowanego pływającego okna dialogowego modalnego. Pozwala obliczyć pozycje w oknie, bez względu na to, która orientacja rozdzielczości lub rozmiar okna używa przeglądarki.

Próba uzyskania tego na urządzeniu mobilnym wymaga kilku dodatkowych kroków. screen.availWidthpozostaje taki sam bez względu na orientację urządzenia.

Oto moje rozwiązanie dla urządzeń mobilnych:

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

Zobacz Uzyskaj rozdzielczość ekranu monitora za pomocą Javascript i window.screenobiektu

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

tylko na przyszłość:

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

Jeśli chcesz wykryć rozdzielczość ekranu, możesz sprawdzić rozdzielczość wtyczki . Umożliwia wykonanie następujących czynności:

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

Oto kilka świetnych rozwiązań od Ryana Van Etten, autora wtyczki:

• Istnieją 2 zestawy jednostek i różnią się w stałej skali: jednostki urządzenia i jednostki CSS.
• Rozdzielczość jest obliczana jako liczba kropek, które mogą zmieścić się na określonej długości CSS.
• Konwersja jednostek: 1⁢in = 2,54⁢cm = 96⁢px = 72⁢pt
• CSS ma długości względne i bezwzględne. W normalnym powiększeniu: 1⁢em = 16⁢px
• dppx odpowiada współczynnikowi pikseli urządzenia.
• Definicja devicePixelRatio różni się w zależności od platformy.
• Zapytania o media mogą być kierowane na minimalną rozdzielczość. Używaj z dbałością o szybkość.

Oto kod źródłowy dla res, na dzień dzisiejszy:

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