Czy istnieje sposób, który działa dla wszystkich przeglądarek?
196
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.devicePixelRatio
iwindow.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
$(window).width()
użyłbym zamiast tego jQuery , patrz odpowiedźwindow.devicePixelRatio
. Zobacz mój komentarz do odpowiedzi Alessandrosa.źródło
window.screen
. Należy po prostu dodać go do istniejącej odpowiedzi.screen.availHeight
podaje tylko dostępną wysokość w oknie przeglądarki, ascreen.height
dokładną wysokość ekranu.window.screen.width * window.devicePixelRatio
iwindow.screen.height * window.devicePixelRatio
. Będzie to również działać na komputerach stacjonarnych, które będą miały stosunek 1.W waniliowym JavaScript daje ci DOSTĘPNĄ szerokość / wysokość:
Aby uzyskać bezwzględną szerokość / wysokość, użyj:
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.
źródło
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ę.
źródło
Korzystając z jQuery możesz:
źródło
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
iwindow.innerHeight
wł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.
źródło
Próba uzyskania tego na urządzeniu mobilnym wymaga kilku dodatkowych kroków.
screen.availWidth
pozostaje taki sam bez względu na orientację urządzenia.Oto moje rozwiązanie dla urządzeń mobilnych:
źródło
window.orientation
zwraca undefined ... (Firefox 49)screen.orientation.angle
zwraca kąt, ale w trybie poziomym jest już ustawiony na 0.Zobacz Uzyskaj rozdzielczość ekranu monitora za pomocą Javascript i
window.screen
obiektuźródło
źródło
tylko na przyszłość:
źródło
Jeśli chcesz wykryć rozdzielczość ekranu, możesz sprawdzić rozdzielczość wtyczki . Umożliwia wykonanie następujących czynności:
Oto kilka świetnych rozwiązań od Ryana Van Etten, autora wtyczki:
Oto kod źródłowy dla res, na dzień dzisiejszy:
źródło