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

Odpowiedzi:

295

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
John Weldon
źródło
16
To nie jest teraz całkiem poprawne. Nie uwzględnia możliwej zmiany powiększenia strony.
sergzach,
7
@sergzach - W takim przypadku $(window).width()użyłbym zamiast tego jQuery , patrz odpowiedź
chaim.dev
3
Użyj window.screen.height i window.screen.width, aby uzyskać dokładny rozmiar ekranu (jak zasugerowano w następnej odpowiedzi). Powodem, dla którego nie otrzymujesz dokładnego rozmiaru, jest sprawdzenie dostępnej szerokości i wysokości, co oznacza, że ​​odejmie wysokość paska narzędzi (która wynosi dokładnie 40 pikseli na Windows 7/8)
Jaruba
4
Nie byłoby lepiej, aby rozdzielczość ekranu pasowała do window.screen. Wysokość i szerokość? dlaczego dostępny Wysokość? na przykład moja szerokość to 1050, kiedy to faktycznie 1080.
Malavos
5
@eckes, z którymi musisz się rozmnażać window.devicePixelRatio. Zobacz mój komentarz do odpowiedzi Alessandrosa.
Tsunamis,
49
var width = screen.width;
var height = screen.height;
Alessandro
źródło
1
Jest to równoważne z window.screen. Należy po prostu dodać go do istniejącej odpowiedzi.
Gajus
3
Właściwie to jest poprawna odpowiedź. screen.availHeightpodaje tylko dostępną wysokość w oknie przeglądarki, a screen.heightdokładną wysokość ekranu.
apnerve
Zwraca rozdzielczość w rozdzielczości dpi, a nie natywną rozdzielczość ekranu.
Dominic Cerisano
4
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.
Tsunamis,
Komputery stacjonarne niekoniecznie mają stosunek 1.
12Me21
34

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()
Ben
źródło
19

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ę.

Larry K.
źródło
19

Korzystając z jQuery możesz:

$(window).width()
$(window).height()
chaim.dev
źródło
To najłatwiejsze rozwiązanie typu cross / all, którego użyłem. Dla szerokości przeglądarki przynajmniej ...
Zarne Dravitzki
34
Zwraca rozmiar okna, a nie rozdzielczość ekranu.
Jonas
19

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.

serfer2
źródło
1
To jest najbardziej przydatne rozwiązanie. Właściwość window.screen.availWidth podaje EKRAN, a nie rzutnię, która może być inna. Bardziej przydaje mi się wiedzieć, ile nieruchomości faktycznie mogę wykorzystać, a nie jaka może być / może maksymalna przeglądarka.
Mike Mannakee
13

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;
};
posit labs
źródło
window.orientationzwraca undefined ... (Firefox 49) screen.orientation.anglezwraca kąt, ale w trybie poziomym jest już ustawiony na 0.
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
źródło
4

tylko na przyszłość:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}
Daniel
źródło
3

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}
});
Abram
źródło